ng-classのチェックで複数の場合

Question

私はこのコードをanglejsアプリにテーブルに含めます。インデックスが0,1,2のみの場合は、「rare」クラスをアクティブにします。索引は行です。テーブルに8列あるとしましょう。その中の最初の3つのクラスだけがそれに適用されるクラス「rare」を持つ必要があります。

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

私はここで何かが欠けアム - $インデックスは行のインデックスである場合 - それは、常に0で開始し、インクリメントしなければなりません。したがって、下限を無視して、インデックスが上限よりも小さいかどうかをテストすることができます（$ indexはゼロでインデックス付けされます（明示的に1から始まるように設定しない限り）。したがって、$ indexが3未満行インデックス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}}