Применить ng-класс только на элемент, который был нажат на

Question

Я хочу применить ng-class только на button/element, на который было нажато, как бы я это сделал?

JS файл:

var classApp = angular.module('classApp', []); 
classApp.controller('classCtrl', function ($scope) { 
    $scope.isActive = false; 

    $scope.activeButton = function() { 
     $scope.isActive = !$scope.isActive;   
    } 
}); 

HTML файл:

<div ng-app="classApp" ng-controller="classCtrl"> 
    <button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me to Toggle Class</button> 

    <button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me to Toggle Class</button> 
</div> 

http://codepen.io/anon/pen/BjNyNe

Answer 1

Вот возможное решение:

Совместное ntroller:

classApp.controller('classCtrl', function ($scope) { 
    $scope.isActive = [false, false]; 

    $scope.activeButton = function (index) {  
     $scope.isActive[index] = !$scope.isActive[index];   
    } 
}); 

И HTML:

<div ng-app="classApp" ng-controller="classCtrl"> 
    <button class="button" ng-class="{'active': isActive[0]}" ng-click="activeButton(0)" type="button">Click Me to Toggle Class</button> 

    <button class="button" ng-class="{'active': isActive[1]}" ng-click="activeButton(1)" type="button">Click Me to Toggle Class</button> 
</div> 

EDIT: мое решение работает, но @Shashank Agrawal solution лучше и чище.

Answer 2

Приходит использование угловых директив. Вместо того, чтобы поддерживать различные переменные, вы можете использовать простую директиву:

app.directive('clickActive', [function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
      element.on('click', function() { 
       element.toggleClass("active"); 
       if (attr.moreClasses) { 
        // Optionally toggle more classes if passed 
        element.toggleClass(attr.moreClasses); 
       } 
      }); 
     } 
    }; 
}]); 

HTML:

<div ng-app="classApp" ng-controller="classCtrl"> 
    <button class="button" click-active type="button">Click Me to Toggle Class</button> 

    <button class="button" click-active type="button">Click Me to Toggle Class</button> 
</div> 

Необязательно проходить несколько классов для переключения типа:

<button class="button" click-active more-classes="foo bar" type="button">Click Me to Toggle Class</button>