How to add multiple condition in a single class using Angular.js

Question

I need one help. I need to add multiple condition with AND operator in ng-class using Angular.js. I am explaining my code below.

<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)">
  <i ng-class="{'fa fa-minus-circle': place.expanded, 'fa fa-plus-circle': !place.expanded }"></i> 
  {{place.root_des}}
</div>

Here I am adding one condition but I need to add another condition ( ie-place.cstatus==1 and place.cstatus==0 ) for both class. Please help.

Answer 1

使用&&而不是和 。

(i.e-place.cstatus==1 && place.cstatus==0)

Answer 2

As commented before, you can also create a function that takes arguments and return classnames.

Benefit of this approach is, it will keep your view clean and the logic will stay in JS. This will also make it more configurable as you can write a code and share it across multiple elements.

 function myCtrl($scope) { $scope.place = { expanded: false, cstatus: 1, root_des: 'test' } $scope.manageCollapseExpand = function(place, seleccted) { place.expanded = !place.expanded } // assuming place should be an array $scope.getClasses = function(index) { var className = 'fa '; if ($scope.place.expanded && $scope.place.cstatus === 1) { className += 'fa-minus-circle ' } else { className += 'fa-plus-circle '; } return className } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller='myCtrl'> <div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)"> <i ng-class="getClasses(0)"></i> {{place.root_des}} <p>Classes: {{getClasses(0)}}</p> </div> </div> 

Answer 3

Simply you can conbind condition using &&

<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)">
  <i ng-class="{'fa fa-minus-circle': place.expanded && place.cstatus==1, 'fa fa-plus-circle': !place.expanded && place.cstatus==0 }"></i> 
  {{place.root_des}}
</div>