/ / How to apply the CSS class binding in AngularJs?
css binding in angularjs

How to apply the CSS class binding in AngularJs?

Edit


The ng-class angularjs binding are used to bind the CSS classes in HTML controls with JS binding functions.  

 Click for live demo plnker

 The example as give below.

1
2
3
4
5
6
7
8
9
//This is CSS code sample
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }

//This is CSS code sample
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
01
02
03
04
05
06
07
08
09
10
11
12
13
//This is AngularJs code sample
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };
      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
//This is AngularJs code sample
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };

      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
//This is HTML code sample
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
//This is HTML code sample
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>

</body>
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
//Full example(CSS + HTML + JavaScript) code sample
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>css binding in angularjs</title>
  <style>
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
  </style>
  <script src="https://code.angularjs.org/1.3.9/angular.js"></script>
  <script>
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };
      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
  </script>
</head>
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
</html>
//Full example(CSS + HTML + JavaScript) code sample
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>css binding in angularjs</title>
  <style>
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
  </style>
  <script src="https://code.angularjs.org/1.3.9/angular.js"></script>
  <script>
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };

      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
  </script>
</head>
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
</html>

The Out put look like below image


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^