mehrfache wenn Prüfungen in ng-Klasse

Question

So habe ich dieses Stück Code in meiner angularjs App, die ich in eine Tabelle aufnehmen. Ich möchte die Klasse 'selten' aktivieren, wenn der Index nur 0, 1 oder 2 ist. Der Index ist die Zeilen. Nehmen wir an, ich habe 8 Zeilen in meinem Tisch. Nur die ersten 3 sollten die Klasse 'selten' haben.

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

Aber ist es ein einfacherer/kürzerer Weg, es zu schreiben? Ist das eine gute Praxis? Ich denke nicht, dass es sehr gut aussieht, obwohl es funktioniert. Wie würden Sie die if-Checks schreiben?

Ich habe versucht:

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

Answer 1

funktioniert hat Sie so etwas tun könnte, wenn Sie eine Liste von Werten haben.

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

Bin ich hier etwas fehlt - wenn $ Index der Zeilenindex ist - es ist immer bei 0 und dann erhöhen beginnen. Daher können Sie das untere Limit ignorieren und einfach testen, ob der Index kleiner als der obere Grenzwert ist (beachten Sie, dass $ index null indiziert wird (außer Sie setzen ihn explizit auf 1). Testen Sie daher, ob $ index kleiner als drei ist erlauben Sie, Zeilenindex 0, 1 und 2 zu wählen).

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

Verwendung:

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