javascript - 如何根据ng-repeat中的数据类型更改样式

Question

我试图让 ng-repeat 从包含 true 和 false 的数组中传播一个列表。如何使假值显示为红色，真值显示为绿色？

这是我现在的代码:

$scope.profileCompare = {

        You: {
            name: "You",
            questionAnswer: [false, true, false, false, false, false],
            questionImportance: [false, true, false]
        },
        Pizza: {
            name: "Pizza",
            questionAnswer: [true, false, false, false, false, false],
            questionImportance: [false, false, true]
        },
        Greenie: {
            name: "Greenie",
            questionAnswer: [false, true, false, false, true, false],
            questionImportance: [true, false, false]
        }
    }

  <h2 ng-repeat-start="(key, value) in profileCompare">{{key}}</h2>
  <ul class="comparison-list">
    <li ng-repeat="importance in value.questionImportance track by $index">
      {{importance}}
    </li>
  </ul>
  <ul ng-repeat-end class="comparison-list">
    <li ng-repeat="answer in value.questionAnswer track by $index" ng-if="answer == true" style="color: green">
    {{answer}}
    </li>
    <li ng-repeat="answer in value.questionAnswer track by $index" ng-if="answer == false" style="color: red">
    {{answer}}
    </li>
  </ul>

这不是这样做的，因为它会遍历数组一次并将所有 true 放在前面而不显示任何 false，然后它再次遍历数组并显示 false 且不显示 true。

如何使其在正确的位置显示绿色 true 和红色 false？

Answer 1

您可以使用以下方式。 ng-class 将具有键作为 css 类、值作为表达式的对象，通过 Angular 求值来检索值。如果为真，则应用该类或删除该类(如果已应用)。

<style>
.red{
color:'red';
}
.green{
color:'green';
}
</style>

<li ng-repeat="answer in value.questionAnswer track by $index" ng-class="{green:answer, red: !answer}">