Wie füge ich eine aktive Klasse mit ng-click Buttons hinzu?

Question

Dies ist der HTML-Code für die Schaltflächen, sind taskfilter die Filter, wie die Tasten funktionieren auf Klick und der Klassenname ist ‚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> 

Dies ist der Code, den ich verwenden, um den Klassenbereich mit der hinzufügen Taste auf Klick den Index in hTML entfernt, weil es

$scope.taskfilters = 0; 
$scope.taskfilter = function(index) { 
    $scope.taskfilters = index; 
}; 

Answer 1

<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> 

Answer 2

Sie ngClass Richtlinie

verwenden arbeiten wont Wenn der Ausdruck bewerten s zu einem Objekt, dann wird für jedes Schlüssel-Wert-Paar des Objekts mit einem truthy Wert der entsprechende key als class name verwendet.

<a ng-class="{'active' : taskfilter == 0}" ng-click="taskfilter = 0"> 

Answer 3

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; 
}