ng-class allows you to implement CSS dynamically by expression in different ways.
we can implement css conditional with the help of ng-class.
we can use : operator to perform if condition.
we can use npg-clsss with ng-repeat.
Demo –
http://plnkr.co/edit/3kSUFyrTNPoZOjnhbKRQ?p=preview
ng-class takes values in three different ways:
Way to use ng-class
<div ng-class=”{expression}”>
<div ng-repeat=”accInfo in AccountInfo” ng-class=”{expression}”>
<!–css will set where condition will match–>
index.html
———————————————————————————————————
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<!DOCTYPE html><html ng-app="myCSSAppDemo"><head> <title>Different way to work with ngClass</title> <script src="app.js"></script> <style> .redBold { color: red; text-decoration: solid; } .blueBold { color: blue; text-decoration: solid; } .pinkBold { color: pink; text-decoration: solid; } .active { text-decoration: underline; font-size: 20px; font-weight: bold; } .Active5StarCustomer { color: gold; font: 30px; font-weight: bold; } </style></head><body ng-controller="cssController"> <span> </span> </div> <!--implement 'redBold' clsss if IsPrimaryAccount is true--> <div> <div style="width:200px;" ng-repeat="accInfo in AccountInfo" ng-class="{redBold:accInfo.IsPrimaryAccount } "> <span> {{accInfo.Id}}</span> <span> {{accInfo.AccountName}}</span> </div> </div> <br> <br> <!--implement 'redBold' clsss if IsPrimaryAccount is true otherwise implement 'blueBold' --> <div> <div style="width:200px;" ng-repeat="accInfo in AccountInfo" ng-class="{true: 'redBold', false: 'blueBold'}[accInfo.IsPrimaryAccount]"> <span> {{accInfo.Id}}</span> <span> {{accInfo.AccountName}}</span> </div> </div> <br> <br> <!--implement 'redBold' clsss if IsPrimaryAccount is true or implement 'active' if IsActive is true --> <div> <div style="width:200px;" ng-repeat="accInfo in ActiveAccountInfo" ng-class="{'redBold':accInfo.IsPrimaryAccount, 'active':accInfo.IsActive}"> <span> {{accInfo.Id}}</span> <span> {{accInfo.AccountName}}</span> </div> </div> <br> <br> <!--implement 'blueBold' clsss if empInfo.Gender is 'Male' or implement 'pinkBold' if Gender is 'Female' class--> <div> <div style="width:200px;" ng-repeat="empInfo in EmpInfo" ng-class="{'Male': 'blueBold', 'Female': 'pinkBold'}[empInfo.Gender]"> <span> {{empInfo.Id}}</span> <span> {{empInfo.Name}}</span> </div> </div> <br> <br> <!--implement Active5StarCustomer clsss if IsActive and 5StarCustomer both will be true--> <div> <div style="width:200px;" ng-repeat="custInfo in CustomerInfo" ng-class="{Active5StarCustomer:custInfo.IsActive && custInfo.5StarCustomer}"> <span> {{custInfo.CustomerId}} </span> <span> {{custInfo.Name}}</span> </div> </div></body></html> |
<!DOCTYPE html>
<html ng-app="myCSSAppDemo">
<head>
<title>Different way to work with ngClass</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
<style>
.redBold {
color: red;
text-decoration: solid;
}
.blueBold {
color: blue;
text-decoration: solid;
}
.pinkBold {
color: pink;
text-decoration: solid;
}
.active {
text-decoration: underline;
font-size: 20px;
font-weight: bold;
}
.Active5StarCustomer {
color: gold;
font: 30px;
font-weight: bold;
}
</style>
</head>
<body ng-controller="cssController">
<span> </span>
</div>
<!--implement 'redBold' clsss if IsPrimaryAccount is true-->
<div>
<div style="width:200px;" ng-repeat="accInfo in AccountInfo" ng-class="{redBold:accInfo.IsPrimaryAccount } ">
<span> {{accInfo.Id}}</span>
<span> {{accInfo.AccountName}}</span>
</div>
</div>
<br>
<br>
<!--implement 'redBold' clsss if IsPrimaryAccount is true otherwise implement 'blueBold' -->
<div>
<div style="width:200px;" ng-repeat="accInfo in AccountInfo" ng-class="{true: 'redBold', false: 'blueBold'}[accInfo.IsPrimaryAccount]">
<span> {{accInfo.Id}}</span>
<span> {{accInfo.AccountName}}</span>
</div>
</div>
<br>
<br>
<!--implement 'redBold' clsss if IsPrimaryAccount is true or implement 'active' if IsActive is true -->
<div>
<div style="width:200px;" ng-repeat="accInfo in ActiveAccountInfo" ng-class="{'redBold':accInfo.IsPrimaryAccount, 'active':accInfo.IsActive}">
<span> {{accInfo.Id}}</span>
<span> {{accInfo.AccountName}}</span>
</div>
</div>
<br>
<br>
<!--implement 'blueBold' clsss if empInfo.Gender is 'Male' or implement 'pinkBold' if Gender is 'Female' class-->
<div>
<div style="width:200px;" ng-repeat="empInfo in EmpInfo" ng-class="{'Male': 'blueBold', 'Female': 'pinkBold'}[empInfo.Gender]">
<span> {{empInfo.Id}}</span>
<span> {{empInfo.Name}}</span>
</div>
</div>
<br>
<br>
<!--implement Active5StarCustomer clsss if IsActive and 5StarCustomer both will be true-->
<div>
<div style="width:200px;" ng-repeat="custInfo in CustomerInfo" ng-class="{Active5StarCustomer:custInfo.IsActive && custInfo.5StarCustomer}">
<span> {{custInfo.CustomerId}} </span>
<span> {{custInfo.Name}}</span>
</div>
</div>
</body>
</html>
app.js
———————————————————————————————————
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
var myApp = angular.module('myCSSAppDemo', []);myApp.controller('cssController', function($scope) { $scope.AccountInfo = [{ "Id": 1, "CompanyId": 101, "TenantId": 1, "AccountName": "AC1001", "ACNumber": "ACTMS1001", "IsPrimaryAccount": true }, { "Id": 2, "CompanyId": 102, "TenantId": 1, "AccountName": "AC1100", "ACNumber": "ACTMS1002", "IsPrimaryAccount": false }]; $scope.ActiveAccountInfo = [{ "Id": 1, "CompanyId": 101, "TenantId": 1, "AccountName": "AC1001", "ACNumber": "ACTMS1001", "IsActive": false, "IsPrimaryAccount": true }, { "Id": 2, "CompanyId": 102, "TenantId": 1, "AccountName": "AC1100", "ACNumber": "ACTMS1002", "IsActive": true, "IsPrimaryAccount": false }]; $scope.EmpInfo = [{ "EmpId": 1, "Gender": "Male", "Name": "Emp1" }, { "EmpId": 2, "Gender": "Female", "Name": "Emp2" }]; $scope.CustomerInfo = [{ "CustomerId": 1, "Gender": "Male", "Name": "Customer1 (5 Star Customer)", "IsActive": true, "5StarCustomer": true }, { "CustomerId": 2, "Gender": "Female", "Name": "Customer2", "IsActive": true, "5StarCustomer": false }];}); |
var myApp = angular.module('myCSSAppDemo', []);
myApp.controller('cssController', function($scope) {
$scope.AccountInfo = [{
"Id": 1,
"CompanyId": 101,
"TenantId": 1,
"AccountName": "AC1001",
"ACNumber": "ACTMS1001",
"IsPrimaryAccount": true
}, {
"Id": 2,
"CompanyId": 102,
"TenantId": 1,
"AccountName": "AC1100",
"ACNumber": "ACTMS1002",
"IsPrimaryAccount": false
}];
$scope.ActiveAccountInfo = [{
"Id": 1,
"CompanyId": 101,
"TenantId": 1,
"AccountName": "AC1001",
"ACNumber": "ACTMS1001",
"IsActive": false,
"IsPrimaryAccount": true
}, {
"Id": 2,
"CompanyId": 102,
"TenantId": 1,
"AccountName": "AC1100",
"ACNumber": "ACTMS1002",
"IsActive": true,
"IsPrimaryAccount": false
}];
$scope.EmpInfo = [{
"EmpId": 1,
"Gender": "Male",
"Name": "Emp1"
}, {
"EmpId": 2,
"Gender": "Female",
"Name": "Emp2"
}];
$scope.CustomerInfo = [{
"CustomerId": 1,
"Gender": "Male",
"Name": "Customer1 (5 Star Customer)",
"IsActive": true,
"5StarCustomer": true
}, {
"CustomerId": 2,
"Gender": "Female",
"Name": "Customer2",
"IsActive": true,
"5StarCustomer": false
}];
});
