AngularJS：ng-repeat 和 ng-class答案

【问题标题】：AngularJS: ng-repeat and ng-classAngularJS：ng-repeat 和 ng-class
【发布时间】：2018-11-22 19:35:33
【问题描述】：

我对 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”。

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-repeat ng-class

【解决方案1】：

您的代码的第一个问题是您将boolean 值与string 进行比较。

true == 'true' // will return false

第二个问题是类名没有包裹在'中。

下面的代码修复了这两个问题：

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

【讨论】：

是的，有效。对于第一个问题，我知道，但我做了很多尝试。谢谢！ :D

【解决方案2】：

用 ' 包裹类名。

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

【讨论】：

【解决方案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' 是一个条件类。

【讨论】：