Change class with AngularJS

Question

I have this piece of code in a ASP.NET MVC view:

<div ng-repeat="it in (@source)">
            <button class="btn hvr-glow btn-success" >
                {{it.name}}
                <p ng-if="it.check==true"><i class="fa fa-check-circle-o" ng-click="it.check=false"></i></p>
                <p ng-if="it.check==false'"><i class="fa fa-circle-o" ng-click="it.check=true"></i></p>       
            </button>                               
        </div>

source is a list of objects of type ApplicationStatus, which contain a boolean field named check. I want to change the type of the font awesome icon on click. But I don't see the icons. Source is correctly loaded. Where is the problem ?

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

You can use ng-class for that. For example:

<i ng-class="{'fa fa-check-circle-o': check, 'fa fa-circle-o': !check}"

Here's another question related to ng-class

Note - a ternary operator would probably be best in your case

edited May 23 '17 at 12:31

Community

1
1

answered Mar 09 '16 at 13:36

Katana24

8,706
19
76
118

Ok but I also want to change check on click – Karl Mar 09 '16 at 13:38

score 0 · Answer 2 · answered Mar 09 '16 at 14:12

<div ng-repeat="it in source">
  <button class="btn hvr-glow btn-success" ng-click="it.check = !it.check">
          {{it.name}}
      <p>
        <i ng-class="{'fa fa-check-circle-o': it.check, 'fa fa-circle-o': !it.check}"></i>
      </p>
  </button>
 </div>

Change class with AngularJS

2 Answers2