Can we have multiple expression to add multiple ng-class ?
for eg.
<div ng-class=\"{class1: expressionData1, class2: expressionData2}\"></div>
If yes can anyone put up the example to do so.
.
Can we have multiple expression to add multiple ng-class ?
for eg.
<div ng-class=\"{class1: expressionData1, class2: expressionData2}\"></div>
If yes can anyone put up the example to do so.
.
To apply different classes when different expressions evaluate to true
:
<div ng-class=\"{class1 : expression1, class2 : expression2}\">
Hello World!
</div>
To apply multiple classes when an expression holds true:
<!-- notice expression1 used twice -->
<div ng-class=\"{class1 : expression1, class2 : expression1}\">
Hello World!
</div>
or quite simply:
<div ng-class=\"{\'class1 class2\' : expression1}\">
Hello World!
</div>
Notice the single quotes surrounding css classes.
Yes you can have multiple expression to add multiple class in ng-class.
For example:
<div ng-class=\"{class1:Result.length==2,class2:Result.length==3}\"> Dummy Data </div>
For the ternary operator notation:
<div ng-class=\"expression1? \'class1 class2\' : \'class3 class4\'\">
An incredibly powerful alternative to other answers here:
ng-class=\"[ { key: resulting-class-expression }[ key-matching-expression ], .. ]\"
Some examples:
1. Simply adds \'class1 class2 class3\' to the div:
<div ng-class=\"[{true: \'class1\'}[true], {true: \'class2 class3\'}[true]]\"></div>
2. Adds \'odd\' or \'even\' classes to div, depending on the $index:
<div ng-class=\"[{0:\'even\', 1:\'odd\'}[ $index % 2]]\"></div>
3. Dynamically creates a class for each div based on $index
<div ng-class=\"[{true:\'index\'+$index}[true]]\"></div>
If $index=5
this will result in:
<div class=\"index5\"></div>
Here\'s a code sample you can run:
var app = angular.module(\'app\', []);
app.controller(\'MyCtrl\', function($scope){
$scope.items = \'abcdefg\'.split(\'\');
});
.odd { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: \"Courier New\", Courier, monospace; }
<script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js\"></script>
<div ng-app=\"app\" ng-controller=\"MyCtrl\">
<div ng-repeat=\"item in items\"
ng-class=\"[{true:\'index\'+$index}[true], {0:\'even\', 1:\'odd\'}[ $index % 2 ]]\">
index {{$index}} = \"{{item}}\" ng-class=\"{{[{true:\'index\'+$index}[true], {0:\'even\', 1:\'odd\'}[ $index % 2 ]].join(\' \')}}\"
</div>
</div>
Using a $scope
method on the controller, you can calculate what classes to output in the view. This is especially handy if you have a complex logic for calculating class names and it will reduce the amount of logic in your view by moving it to the controller:
app.controller(\'myController\', function($scope) {
$scope.className = function() {
var className = \'initClass\';
if (condition1())
className += \' class1\';
if (condition2())
className += \' class2\';
return className;
};
});
and in the view, simply:
<div ng-class=\"className()\"></div>
Your example works for conditioned classes (the class name will show if the expressionDataX
is true):
<div ng-class=\"{class1: expressionData1, class2: expressionData2}\"></div>
You can also add multiple classes, supplied by the user of the element:
<div ng-class=\"[class1, class2]\"></div>
Usage:
<div class=\"foo bar\" class1=\"foo\" class2=\"bar\"></div>
Here is an example comparing multiple angular-ui-router states using the OR || operator:
<li ng-class=\"
{
warning:
$state.includes(\'out.pay.code.wrong\')
|| $state.includes(\'out.pay.failed\')
,
active:
$state.includes(\'out.pay\')
}
\">
It will give the li the classes warning and/or active, depening on whether the conditions are met.
Below active and activemenu are classes and itemCount and ShowCart is expression/boolean values.
ng-class=\"{\'active\' : itemCount, \'activemenu\' : showCart}\"
With multiple conditions
<div ng-class=\"{\'class1\' : con1 || can2, \'class2\' : con3 && con4}\">
Hello World!
</div>
Found another way thanks to Scotch.io
<div ng-repeat=\"step in steps\" class=\"step-container step\" ng-class=\"[step.status, step.type]\" ng-click=\"onClick(step.type)\">
This was my reference. https://scotch.io/tutorials/the-many-ways-to-use-ngclass
Other way we can create a function to control \"using multiple class\"
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b {
font-weight: bold;
}
</style>
Script
<script>
angular.module(\'myapp\', [])
.controller(\'ExampleController\', [\'$scope\', function ($scope) {
$scope.MyColors = [\'It is Red\', \'It is Yellow\', \'It is Blue\', \'It is Green\', \'It is Gray\'];
$scope.getClass = function (strValue) {
if (strValue == (\"It is Red\"))
return \"Red\";
else if (strValue == (\"It is Yellow\"))
return \"Yellow\";
else if (strValue == (\"It is Blue\"))
return \"Blue\";
else if (strValue == (\"It is Green\"))
return \"Green\";
else if (strValue == (\"It is Gray\"))
return \"Gray\";
}
}]);
</script>
Using it
<body ng-app=\"myapp\" ng-controller=\"ExampleController\">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat=\"icolor in MyColors\" >
<p ng-class=\"[getClass(icolor), \'b\']\">{{icolor}}</p>
</li>
</ul>
You can refer to full code page at ng-class if example