Isoliert Umfang für einzelne Elemente in einer Liste in AngularJS

Question

ich eine Liste der Elemente, die ich bin mit bevölkern ng-repeat

<ul> 
    <li ng-repeat="item in items" ng-class="setClass" ng-click="assignClass()">{{item.name}}</li> 
</ul> 

und in meinem Controller

$scope.assignClass = function(){ 
    $scope.setClass = "sampleClass"; 
} 

Wenn ich tue wie dies und das Klicken auf einen beliebigen Artikel alle Elemente erhalten die sampleClass hinzugefügt.

ich dieses Szenario benötigen,

Wenn ich auf das erste Element klicken sollte das Element haben die Sample und wenn ich auf den zweiten Punkt möchte ich die beiden ersten und zweiten Elemente sollten Sample

haben

Wie kann ich dieses Szenario erreichen?

Answer 1

Der Code, den Sie verwenden, legt das Styling für alle Listenelemente fest, wie Sie bereits erwähnt haben. Ich habe den Code ein wenig geändert, um die Klasse für ein einzelnes Element in der ungeordneten Liste festzulegen. Durch Aufrufen der assignClass mit dem ausgewählten Element als Parameter können Sie die Klasse für dieses Element festlegen.

<ul> 
    <li ng-repeat="item in items" ng-class="item.setClass" ng-click="assignClass(item)"> 
     {{item.name}} 
    </li> 
</ul> 


$scope.assignClass = function(selectedItem){ 
    selectedItem.setClass = "sampleClass"; 
} 

Answer 2

Übergeben Sie die item in assignClass Funktion.

<ul> 
    <li ng-repeat="item in items" ng-click="assignClass(item)">{{item.name}}</li> 
</ul> 

dann die Klasse des Elements ändern

$scope.assignClass = function(item){ 
    $(item).toggleClass("sampleClass"); 
}