Question

所以我在angularjs应用程序中有这段代码，我将其包含在表格中。如果索引仅为0,1或2，我想激活类'稀有'。索引是行。假设我的表中有8行。只有其中的前三个应该应用“稀有”类。

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

但是有更轻松/更短的写作方式吗？这是好习惯吗？我不认为它看起来很好，即使它有效。你会怎么写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是否小于3将允许您选择行索引0,1和2）。

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

＆＃13;

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

＆＃13;

.rare {
    color: red;
    }

＆＃13;

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

＆＃13;

Answer 3

使用：

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

如果检查ng-class，则为multiple

3 个答案: