Different way to work with ngClass

on
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="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>
<!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
  }];

});

Comments

  1. Unknown19 September 2015 at 19:31

    This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment