Question

我有ng-repeat和ng-class的问题。我只想在参数“sel”为真时才应用类。我的数据是这样的： 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

第二个问题是该类的名称未包含在'。

中

Bellow代码修复了这两个问题：

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

Answer 2

用'。

包装类名

<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，还需要有条件地添加一个类。这是它的语法。

<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是列表中的类，而'person-select'是条件类。

AngularJS：ng-repeat和ng-class

3 个答案: