Несколько проверок if в ng-классе

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

Использование:

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

Answer 3

Я что-то здесь упускаю - если $index является индексом строки - он всегда должен начинаться с 0, а затем увеличиваться. Следовательно, вы можете игнорировать нижний предел и просто проверить, не превышает ли индекс верхний предел (обратите внимание, что индекс $ будет индексироваться с нуля (если вы явно не установите его на 1), поэтому тестирование, если индекс $ меньше трех, будет позволяют выбрать индекс строки 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>