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 (i.e-place.cstatus==1 and place.cstatus==0) for both class. Please help.

ng-class="{'test': obj.value1 == 'someothervalue' && obj.value2 == 'somethingelse'}" — sumit chauhan
– sumit chauhan, Commented Oct 31, 2017 at 7:07

Antikhippe · Accepted Answer · 2017-10-31 07:06:47Z

3

Use && instead of and.

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

answered Oct 31, 2017 at 7:06

Antikhippe

6,7132 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user5443928 Over a year ago

Can it be like this

<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>

Antikhippe Over a year ago

Yes, just try it. ;)

Rajesh Dixit Over a year ago

@subhra my suggestion create a function that returns a string/array of classes and pass it place to it. This way, you will keep your view clean

user5443928 Over a year ago

I dont know but in my editor(i.e-sublime Text) this && showing red mark means some error if I am writing this.

Rajesh Dixit · Accepted Answer · 2017-10-31 07:27:02Z

3

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>

answered Oct 31, 2017 at 7:27

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

1 Comment

code.cycling Over a year ago

This answer is the right one i think using the proper approach.

Dushyantha · Accepted Answer · 2017-10-31 09:26:29Z

0

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>

answered Oct 31, 2017 at 9:26

Dushyantha

2172 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related