AngularJS ng-click and ng-class.

by gogirl

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
<div 
    ng-init="index=0; classes=['red', 'yellow', 'green']" 
    ng-click="index = index + 1" 
    ng-class="classes[index % classes.length]">Click to change traffic color</div>
   <td>Index = {{index}};</td>
   <td>Length = {{classes.length}}</td>
   <td>Style= {{classes[index % classes.length]}}</td>
    
</div>

CSS

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.yellow {
    background-color: yellow;
}

JavaScript

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

app.controller('MainCtrl', function($scope) {


});
//ng-class: using a string syntax getColor() 
//data: three possible class styles and an index
//user action: click
//view: resulting style