多个 if 检查 ng-class

Question

所以我的 angularjs 应用程序中有这段代码，我将其包含在 table 中。如果索引仅为 0、1 或 2，我想激活 class 'rare'。索引是行。假设我的 table 中有 8 行。只有其中的前 3 个应用 class 'rare'。

ng-class="{rare : $index === 0, rare : $index === 1, rare : $index === 2}"

但是有easier/shorter的写法吗？这是好习惯吗？我不认为它看起来很好，即使它有效。你会如何编写 if 检查？

我试过了：

ng-class="{rare : $index === {0,1,2}} 但没用

Answer 1

如果你有一个值列表，你可以这样做。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.data = "Test";
    $scope.rareList = [1, 2, 3];
    $scope.val1 = 2;
    $scope.val2 = 5;
  }
]);

.active {
  color: red;
}
.not-active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-class="rareList.includes(val1)? 'active' : 'not-active'">{{data}}</div>
    <div ng-class="rareList.includes(val2)? 'active' : 'not-active'">{{data}}</div>
  </div>
</div>

Answer 2

我是不是漏掉了什么——如果 $index 是行索引——它必须始终从 0 开始，然后递增。因此，您可以忽略下限并简单地测试索引是否小于上限（注意 $index 将从零索引（除非您明确将其设置为从 1 开始），因此测试 $index 是否小于三将允许您 select 行索引 0、1 和 2）。

ng-class="{rare: $index < 3}"

var app = angular.module("sampleApp", []);

    app.controller("sampleController", ["$scope",
      function($scope) {
        $scope.data = ['test1','test2','test3','test4'];
      }
    ]);

.rare {
    color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <div ng-app="sampleApp">
      <div ng-controller="sampleController">
        <div ng-class="{rare: $index < 3}" ng-repeat="datum in data">{{datum}} ($index = {{$index}})</div>

      </div>
    </div>

Answer 3

使用：

ng-class="{rare : [0,1,2].indexOf($index) >= 0}}

多个 if 检查 ng-class

multiple if checks in ng-class

javascript

if-statement

angularjs

ng-class