How to put multiple condition in ng-class

Question

suppose i am showing product information. i want if price less than 50 then item color should be red. if price more than 50 then item color should be yellow and if price more than (50+(50*60/100)) then item color should be green. now tell me how could i achieve it best way. guide me with best approach to complete it.

this way i tried but i came to know there will be more iteration due to dirty check when work with ng-repeat. see my code and tell me how could i put multiple condition in ng-class to set class dynamically.

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li ng-class="setColor(item.price)" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>
  </ul>
</div>


var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {

$scope.setColor = function(price) {

     alert(price);
}   

  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
    }
    ]
})

tell me without calling function from ng-class how could i place multiple if else condition in ng-class?

if price > 50
   return "css-class-yello"
else if price < 50
   return "css-class-red"
else if price > (50+(50*60/100))
   return "css-class-green"

if possible please guide me with code. thanks

Your expression can be a controller function, or you can have different expressions for each class. — isherwood, Apr 08 '16 at 18:40
see my last if else and tell me how to apply condition this way in my ng-class with a sample code. — Mou, Apr 08 '16 at 18:41
Just a note: 50 + (50*60/100)) is simply 80 (would be much clearer to just use 80), and your last `else if` will never be executed, because if it's > 80, it's also > 50, and css-class-yello will thus be returned.You also don't deal witna price equal to 50. — JB Nizet, Apr 08 '16 at 18:56
The function call over the expression string has the advantage of being used multiple times in the app and if you need to modify the class name or object in any way, it's done in one spot rather than chasing it down in your views. Or, even better, store it in a service for multiple controllers to use. — Rob, Apr 08 '16 at 19:08

score 1 · Answer 1 · answered Apr 08 '16 at 18:46

You could set ng-class to call a function in your controller and pass the object.

Example: https://jsfiddle.net/5hgLshhz/

<ul>
    <li ng-repeat="p in ctrl.products" ng-class="ctrl.setClass(p)">{{p.name}}</li>
</ul>


function Controller() {
  var vm = this;

  vm.products = [{
    'name': 'Xbox',
    'clearance': true,
    'price': 30.99,
  }, {
    'name': 'Xbox 360',
    'clearance': false,
    'salesStatus': 'old',
    'price': 99.99,
  }, {
    'name': 'Xbox One',
    'salesStatus': 'new',
    'price': 50,
  }, {
    'name': 'PS2',
    'clearance': true,
    'price': 79.99,
  }, {
    'name': 'PS3',
    'salesStatus': 'old',
    'price': 99.99,
  }, {
    'name': 'PS4',
    'salesStatus': 'new',
    'price': 20.99,
  }];

  vm.setClass = setClass;

  function setClass(p) {
    if (p.price > 50) {
      return 'css-class-yellow';
    }

    if (p.price < 50) {
      return 'css-class-red';
    }

    if (p.price > (50 + (50 * 60 / 100))) {
      return 'css-class-green';
    }
  }
}

any idea how to set css dynamically by writing custom directives. if possible put code or hints here. thanks — Mou, Apr 08 '16 at 21:01

score 1 · Accepted Answer · answered Apr 08 '16 at 18:57

try like this.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  
  $scope.products = [{
    'name': 'Xbox',
    'clearance': true,
    'price': 30.99,
  }, {
    'name': 'Xbox 360',
    'clearance': false,
    'salesStatus': 'old',
    'price': 99.99,
  }, {
    'name': 'Xbox One',
    'salesStatus': 'new',
    'price': 50,
  }, {
    'name': 'PS2',
    'clearance': true,
    'price': 79.99,
  }, {
    'name': 'PS3',
    'salesStatus': 'old',
    'price': 99.99,
  }, {
    'name': 'PS4',
    'salesStatus': 'new',
    'price': 20.99,
  }];
  });

.css-class-yellow{
  background-color: yellow;
  }
.css-class-red{
  background-color: red;
  }
.css-class-green{
  background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in products" ng-class="{'css-class-yellow' : item.price > 50,'css-class-red' : item.price <50, 'css-class-green' : item.price > 50+50*60/100}">
           <a href="">{{item.name}}</a>
        </li>
                       
     </ul>        
</div>

any idea how to set css dynamically by writing custom directives. if possible put code or hints here. thanks — Mou, Apr 08 '16 at 21:01

score 0 · Answer 3 · answered Apr 08 '16 at 18:42

There are several different ways to use ng-classthe way I most commonly use this directive is by setting your css class to a boolean $scope variable... something like:

HTML:

ng-class="{your-css-class:$scope.myVariable}"

Angular controller:

//to add class
$scope.myVariable = true

//to remove class
$scope.myVariable = false

To use multiple classes simply seperate them by commas something like:

ng-class="{your-css-class:$scope.myVariable, my-other-class:$scope.myOtherVariable}"

fiddle here

any idea how to set css dynamically by writing custom directives. if possible put code or hints here. thanks — Mou, Apr 08 '16 at 21:01

How to put multiple condition in ng-class

3 Answers3