How to put multiple condition in ng-class [duplicate] - angularjs

Question

This question already has answers here:
Adding multiple class using ng-class
(12 answers)
Closed 6 years ago.
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}} — {{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

Answer 1

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}">
{{item.name}}
</li>
</ul>
</div>

Answer 2

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';
}
}
}

Answer 3

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