在angularjs中添加/删除多个li的类 [英] add/remove class of multiple li in angularjs

问题描述

我的名单如下...

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

现在，当单击特定的li时，我希望将active类添加到同一类中，并从其余的li元素中删除active类.另外，当再次单击相同的li时，我想删除active类.

Now, when a particular li is clicked, I want the active class to be added to the same and remove active class from the rest of the li elements. Also, when the same li is clicked again I want to remove active class.

如何使用ng-click和ng-class执行此操作?

How, can i do this using ng-click and ng-class?

推荐答案

检查以下示例:

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>

这篇关于在angularjs中添加/删除多个li的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！