Different way to work with ngClass

avatar
by Virender
February 27, 2015

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:

  •  A string value (name of class)    – ng-model=”classOne”
  • An array of strings      – ng-class=”[classOne, classTwo]”   
  • An object + expression to evaluate against    – ng-class=”{ ‘redBold’: variable1, ‘blueBold’: variable2 }   – redBold will apply when variable1 will be true

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="http://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
}];

});

One thought on “Different way to work with ngClass

  1. Unknown says:

    This comment has been removed by a blog administrator.

Leave a Reply

Your email address will not be published. Required fields are marked *