Question

我有一个li元素列表，它们是一个侧边栏。我正在寻找为单击的人添加课程active的方法，并从其他课程中删除该课程。

这是我的HTML代码：

...
<li ng-click="openNav($event)" ng-class="{'active': isActive }">
    ...
</li>
<li ng-click="openNav($event)" ng-class="{'active': isActive }">
    ...
</li>
<li ng-click="openNav($event)" ng-class="{'active': isActive }">
    ...
</li>

这是我控制器上的代码

Test.controller('NavController', function($scope, $http) {
    $scope.isActive = false;

    $scope.openNav = function($event) {
        //$scope.isActive = true;
    }
})

第$scope.isActive = false;行删除了我需要的类，但我找不到将类添加到点击的方法

Answer 1

这是做角色的方式......

<li ng-click="openNav(active = 1)" ng-class="{'active': active == 1 }">
<li ng-click="openNav(active = 2)" ng-class="{'active': active == 2 }">
<li ng-click="openNav(active = 3)" ng-class="{'active': active == 3 }">

编辑：请注意，您应该使用active之类的内容替换active.nav，以便日后不会遇到问题。

Answer 2

您可以在ng-class

中添加多个条件

<li ng-click="openNav($event)" ng-class="{'active': isActive, 'normal': isNotActive }">

Answer 3

活跃的属性应该引用每个项目 - 想象它就像枚举 - 不像布尔工作实例： http://jsfiddle.net/prash/Cp73s/267/

＆＃13;

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope) {

  
 $scope.showData = function( ){

 
     $scope.datalists = [
    { "name": "Read about angular"},
    {"name": "Read about knockout"},
    {"name": "Read about backbone"},
    {"name": "Read about jquery"},
    {"name": "Read about javascript"}
    
]
}
 $scope.select= function(item) {
	       $scope.selected = item; 
	};
$scope.isActive = function(item) {
	       return $scope.selected === item;
	};

 	    
	
});

＆＃13;

.paginationclass{
    
margin: 19px 28px;    
}
.paginationclass div{
    cursor:pointer;
    text-decoration:underline;
}
.active{
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="sampleapp">
    <div ng-controller="samplecontoller" ng-init="showData()">
        
        
 <ul>
 <li class="paginationclass" ng-repeat="datalist in datalists" ng-click="select(datalist)" ng-class="{active: isActive(datalist)}">
 <div>{{ datalist.name }} </div> 
 </li>
</ul> 
        
    
    
    
    </div>
</div>

＆＃13;

如何在元素中添加一个类并移除给AngularJS中的其他兄弟

3 个答案: