Question

我试图让ng-repeat从包含trues和falses的数组中传播一个列表。我该怎么做才能让谬误变成红色，而且结果是绿色的呢？

这是我现在的代码：

＆＃13;

$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]
        }
    }

＆＃13;

  <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>

＆＃13;

这不是这样做的，因为它经过一次数组并将所有的真实状态放在前面并没有表现出任何谬误，然后它再次通过数组并显示出愚蠢而且没有真实。

我该怎么做才能在适当的位置显示绿色真和红色假？

Answer 1

您可以使用以下方式。 ng-class将具有键的对象作为css类，将value作为表达式，由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}">

Answer 2

在angular中，你不能使用style属性，你需要定义css类样式，然后使用angular

应用该类

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

然后像这样使用ng-class

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

注意：好吧，我说谎了，你可以在样式attr中使用angular，但只能像这样进行插值

<div style="color: {{color}}"></div>

这对你当前的问题没有帮助

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

2 个答案: