AngularJS：ng-重复和 ng-class

Question

我对 ng-repeat 和 ng-class 有疑问。我只想在参数 "sel" 为真时应用 class。我的数据是这样的： people = [{"id":0,"name":"Simone","sel":true},{"id":1,"name":"Maria","sel":false},{"id":2,"name":"Marco","sel":false}]

在我的 html 页面中，我：

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{person-select: person.sel == 'true'}">{{person.name}}</span>
</li>

但是它不起作用..我哪里错了？我尝试使用 {{person.name}}-{{person.sel}} 并打印 "Simone-true .. Maria-false .. Marco-false".

Answer 1

您的代码的第一个问题是您正在比较 boolean 值与 string。

true == 'true' // will return false

第二个问题是 class 的名称没有包含在 ' 中。

下面的代码解决了这两个问题：

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="{'person-select': person.sel}">{{person.name}}</span>
</li>

Answer 2

用 ' 包裹 class 名称。

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{'person-select': person.sel == 'true'}">{{person.name}}</span>
</li>

Answer 3

我知道这是一个老问题，但要补充一下。我必须从人（从列表中）申请 CSS，并且还需要有条件地添加 class。这是它的语法。

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="[person.someClass, {'person-select': person.sel}]">{{person.name}}</span>
</li>

这里 person.someClass 是列表中的 class 而 'person-select' 是条件 class.

AngularJS：ng-重复和 ng-class

AngularJS: ng-repeat and ng-class

angularjs

ng-repeat

angularjs-ng-repeat

ng-class