Directive: Adding and removing css class

http://angularjs.org/

by Srinivas Paila

HTML

<h2>Adding and removing css class</h2>
<br/>
<div ng-controller="MyCtrl">
    <input type="button" active value='One' />
    <input type="button" active value='Two' />
    <input type="button" active value='Three' />
</div>

CSS

.active { 
    background: blue;
    color: yellow; 
}

JavaScript

var app = angular.module('myApp',[]);

app.directive('active', function() {
    return {
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                //Remove the active from all the child elements
                element.parent().children().removeClass('active');
                
                //Add active class to the clicked buttong
                element.toggleClass('active');
            })
        },
    }
});

function MyCtrl($scope) {
}