在AngularJS中添加/删除多个li的类

2023-12-24

我的清单如下...

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

现在,当一个特定的li被点击,我想要active要添加到相同的类并删除active与其他班级相比li元素。另外,当同样li再次点击我想删除active class.

如何,我可以使用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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在AngularJS中添加/删除多个li的类 的相关文章

随机推荐