Define second ng-click in AngularJS

Question

Define second ng-click in AngularJS

Here is code to click button text color using AngularJS.

<button ng-class="myClass"
   ng-click="myClass='red'"
   ng-init="myClass='blue'">
some text
</button>

http://jsfiddle.net/rLkb5/2/

Is it possible to change the color to green on the second click? (blue->red->green)

My gut tells me it's impossible without controller+custom JS code but there may be a simple way.

angularjs

Answer 1

Check if this is acceptable

<div ng-app>
    <button ng-class="myClass" ng-click="counter = counter + 1; myClass=classes[counter % 3]" ng-init="myClass='blue'; classes=['blue', 'red', 'green']; counter=0">some text</button>
</div>

Demo: Fiddle

Answer 2

There is probable a better way, but if you rename your classes:

.statetrue{
  color:red
}

.statefalse{
  color:blue
}

Then, your button:

<button ng-class="'state' + myClass" ng-click="myClass = !myClass"  ng-init="myClass=true">

Answer 3

function MyCtrl($scope) {
  $scope.active = false;
  $scope.toggleActive = function () {
    $scope.active = !$scope.active; 
 };
}

.

<div ng-class="{red: !active, green: active}" ng-click="toggleActive()"></div>

ngClass, when given an object, sets the classes of which property values are truthful.

Note: View's should not contain any business logic as they are hard to test; they only should interact with the controller.

Clarifition on that:

What you shouldn't do is, to change properties in scope directly from your view. Have a function in controller acts as a wrapper which does that for you. View can change how itself is rendered depending on the scope properties and call functions in controller to manipulate data. Also, controllers should not aware of at all how you want to display the data, it should behave like there is no view at all (That in fact, view should be replacable). Which css class you want to apply is not something your controller should know / decide.