我正在尝试向点击的元素添加一个类,并在用户点击其他元素时将其删除。
我有类似的东西
<li ng-repeat='test in tests' >
<a href='' ng-click='pickTest($index, $event)'>{{test.title}}</a>
</li>
js
$scope.pickTest = function(index, event) {
$(event.target).addClass('blur');
//this works when user clicks one of the <a> tags
//but I want to remove the class if user clicks another <a> tag
};
我该怎么做?
谢谢!
最佳答案
您可以使用 ng-class
来确定是否需要根据特定条件附加该类。此外,在 ng-repeat
中使用 $index
确实不可取,因为在 ng-repeat
指令中应用过滤器时会造成问题。您可以创建两个函数,用于 ng-class
指令的 isActive()
和用于设置事件项的 setActive()
。
angular.module('app', [])
.controller('Ctrl', function($scope) {
var activeTest = {};
$scope.tests = [{
title: 'Test 1'
}, {
title: 'Test 2'
}, {
title: 'Test 3'
}, {
title: 'Test 4'
}];
$scope.setActive = function(test) {
activeTest = test;
};
$scope.isActive = function(test) {
return angular.equals(activeTest, test);
};
});
.blur {
color: red;
}
<div ng-app="app" ng-controller="Ctrl">
<ul>
<li ng-repeat="test in tests">
<a href="" ng-click="setActive(test)" ng-class="{blur: isActive(test)}">{{test.title}}</a>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
关于javascript - 如何处理我类的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25925677/