hinzufügen/entfernen Klasse von mehreren li in AngularJS

Question

I Liste haben, wie unten ...

<ul id="menu"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

Nun, wenn eine bestimmte li geklickt wird, möchte ich die active Klasse zu derselben hinzugefügt werden, und entfernen Sie active Klasse aus dem Rest der li Elemente. Auch wenn dieselbe li erneut angeklickt wird, möchte ich active Klasse entfernen. Wie kann ich dies mit ng-click und ng-class tun?

Answer 1

überprüfen Sie das folgende Beispiel:

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.setMaster = function(section) { 
 
    $scope.selected = section; 
 
    } 
 

 
    $scope.isSelected = function(section) { 
 
    return $scope.selected === section; 
 
    } 
 
}]);

.active { 
 
    background-color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <ul> 
 
     <li ng-repeat="i in ['One', 'Two', 'Three']" ng-class="{active : isSelected(i)}"> 
 
     <a ng-click="setMaster(i)">{{i}}</a> 
 
     </li> 
 
    </ul> 
 
    <hr> {{selected}} 
 
</div>