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
}];
});
This comment has been removed by a blog administrator.