css binding in angularjs

How to apply the CSS class binding in AngularJs?



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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.