-6

I have used font awesome CSS on a dropdown button to show plus and minus icon, I wanted to change the CSS from plus to minus when the dropdown is expanded and vice versa.

<a class="btn btn-primary" ng-model="expand" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-plus-circle"></i> {{expression}}</a>

Need to change the fa fa-plus-circle class to fa fa-minus-circle class when dropdown expanded and vice versa.

Pradvaar cruz
  • 281
  • 1
  • 9
  • 21

1 Answers1

3

It's a BAD practice to have ng-model on an element which is not used for input from the user. It should be used when you want to provide two way binding. You could use ng-class to add a class conditionally

<a class="btn btn-primary" ng-model="expand" 
  btn-checkbox btn-checkbox-true="true" 
  btn-checkbox-false="false"
  ng-click="expand=!expand">
    <i class="fa" ng-class="{'fa-plus-circle': !expand, 'fa-minus-circle': expand}"></i> 
      {{expression}}
</a>
Alberto L. Bonfiglio
  • 1,767
  • 23
  • 38
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299