1.点击其中一个li其他的class不影响
2.点击其中一个li其他的class影响
<!DOCTYPE html> <html lang="en" ng-app='ui.bootstrap.demo'> <head> <meta charset="UTF-8"> <title>test alert</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script> <script src="https://code.angularjs.org/1.5.8/i18n/angular-locale_zh-cn.js"></script> <style> .list{list-style: none;} .list .list-item{height:35px;line-height: 35px;width:auto;cursor: pointer;border-bottom: 1px solid green;} .list .list-item:hover{background-color: lightblue;} .selected{background-color: blue;} </style> </head> <body> <div ng-controller="alertDemoCtrl"> <ul class="list"> <li ng-repeat="list in lists" ng-click="list.active=!list.active" ng-class="{selected:!list.active}" class="list-item">{{list.value}}</li> </ul> </div> <div ng-controller="demoCtrl"> <ul class="list"> <li ng-repeat="list in lists" ng-click="itemClick($index)" ng-class="{selected:selectedItem==$index}" class="list-item">{{list.value}}</li> </ul> </div> <script> angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']).controller('alertDemoCtrl',function($scope,$animate){ $scope.lists=[{value:'列表一',active:'false'},{value:'列表一',active:'false'},{value:'列表一',active:'false'}] }) .controller('demoCtrl',function($scope){ $scope.lists=[{value:'列表二',active:'false'},{value:'列表二',active:'false'},{value:'列表二',active:'false'}]; $scope.selectedItem=null; $scope.itemClick=function($index){ $scope.selectedItem=$index; } }) </script> </body> </html>