[英]How to add a active class on ng-click buttons?
This is the html code for the buttons, taskfilter
is the filter of how the buttons work on click and the class name is 'sel' 这是按钮的html代码,
taskfilter
是按钮在单击时如何工作的过滤器,类名称为'sel'
<a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'sel':enabled}">
<span>show completed</span>.
</a>
<a class="clear-completed" ng-click="taskfilter = 2" ng-class="{'sel':enabled}">
<span>show to do</span>.
</a>
<a class="clear-completed" ng-click="taskfilter = 0" ng-class="{'sel':enabled}">
<span>show all</span>.
</a>
This is the code I used to add the class scope with the button on click removed the index in html because it wont work 这是我用来单击按钮添加类范围的代码,删除了html中的索引,因为它无法正常工作
$scope.taskfilters = 0;
$scope.taskfilter = function(index) {
$scope.taskfilters = index;
};
You can use ngClass
directive 您可以使用
ngClass
指令
If the expression evaluates to an object, then for each key-value pair of the object with a
truthy
value the correspondingkey
is used as aclass name
.如果表达式对一个对象求值,则对于具有
truthy
值的对象的每个键-值对,将对应的key
用作class name
。
<a ng-class="{'active' : taskfilter == 0}" ng-click="taskfilter = 0">
<a class="clear-completed" ng-click="taskfilters = 1" ng-class="{'sel':taskfilters == 1}">
<span>show completed</span>.
</a>
<a class="clear-completed" ng-click="taskfilters = 2" ng-class="{'sel':taskfilters} == 2">
<span>show to do</span>.
</a>
<a class="clear-completed" ng-init="taskfilters = 0" ng-click="taskfilters = 0" ng-class="{'sel':taskfilters == 0}">
<span>show all</span>.
</a>
<a class="clear-completed" ng-click="taskfilters = 1" ng-class="{'sel':taskfilters == 1}">
<span>show completed</span>.
</a>
<a class="clear-completed" ng-click="taskfilters = 2" ng-class="{'sel':taskfilters} == 2">
<span>show to do</span>.
</a>
<a class="clear-completed" ng-click="taskfilters = 0" ng-class="{'text-primary':!taskfilters, 'sel':taskfilters == 0}">
<span>show all</span>.
</a>
var app = angular.module("ap",[]);
app.controller("con",function($scope) {
$scope.class = "red";
$scope.changeClass = function(){
if ($scope.class === "red")
$scope.class = "blue";
else
$scope.class = "red";
};
}); });
.red{
color:red;
}
.blue{
color:blue;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.