【问题标题】:Angular js ng repeat with conditional ng class not applying css classAngular js ng重复条件ng类而不应用css类
【发布时间】:2014-12-12 14:28:42
【问题描述】:

在我的 css 类的名称中有连字符的情况下,我有一个不应用 css 类的 ng 类的 ng 重复:

<li
  ng-repeat="item in items"
  ng-class="{'i-someclass' : item.Id > 10}">
  {{item .name}}
</li>

我做错了吗?如果我将 css 类名更改为 isomeclass 它可以工作。 AngularJS v1.0.7

【问题讨论】:

  • 只需检查 Angular 是否添加了一个名为 iSomeclass 的类。

标签: javascript angularjs


【解决方案1】:

对我来说,您的代码按原样运行。

Here is a plunker 演示代码。

js:

var app = angular.module('myApp', []);

app.controller('Ctrl', function($scope) {

  $scope.items = [

    { Id: 1, name: "item1" },
    { Id: 10, name: "item1" },
    { Id: 11, name: "item1" }
    ];

  });

html:

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <ul>
      <li
        ng-repeat="item in items"
        ng-class="{'i-someclass' : item.Id > 10}">
        {{item .name}}
      </li>
    </ul>
  </body>

</html>

css:

.i-someclass {
  color: red;
}

【讨论】:

  • 我认为他是在专门讨论 1.0.7 版本,所以问题可能在那个版本中。
  • @Chandermani 好的,我更新了 plunker 链接(现在是 1.0.7)并且仍然有效。 :)
  • 您好,很抱歉让您久等回复,它确实适用于一个简单的控制器,我的描述有点欠缺,我在部分代码中使用此代码,所以我们有 data-ng-include data- src="getMyPartial()" 数据-ng-show="getMyPartial()"。 getMyPartial 是作用域上加载部分的方法,所以我认为问题是当上面的代码通过部分以这种方式加载时。
猜你喜欢
  • 2016-03-24
  • 2015-11-30
  • 2019-03-19
  • 2015-09-15
  • 2019-04-21
  • 1970-01-01
  • 2017-06-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多