CODEWITHSUNDEEP
javascripthtmlcssangularjs
Learner
Learner

Reputation: 21393

ng-class scope variable not working

I am trying to add CSS based on a scope variable in Angular JS:

<html>
<head>
    <style type="text/css">
        body {color: black; font-size: 10px;}
        .redcolor {color: red; font-size: 20px}
        .greencolor {color: green; font-size: 100px}
    </style>
</head>
<body ng-app="app">
    <div ng-controler="controller">
        <span ng-class="{redcolor: test1.isRed, greencolor: test1.isGreen}">Span1</span><br/><br/>
        <span ng-class="{redcolor: test2.isRed, greencolor: test2.isGreen}">Span2</span>
    </div>

    <script src="angular.js"></script>
    <script type="text/javascript">
    angular.module('app',[])
    .controller('controler', function($scope) {
        $scope.test1 = {isRed: true, isGreen: false};
        $scope.test2 = {isRed: false, isGreen: true};
    });
    </script>
</body>
</html>

When I run this program it is just applying the CSS of body. I need span 1 with style of redColor and Span 2 with style of greenColor.

Please help me what is the issue in this code.

Upvotes: 0

Views: 57

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222532

There are few issues with your code,

(i) It should be ng-controller instead of ng-controler

(ii) Also your controller name is controler not controller

Change it as follows,

 <div ng-controller="controler">    
 </div>

DEMO

angular.module('app',[])
    .controller('controler', function($scope) {
        $scope.test1 = {isRed: true, isGreen: false};
        $scope.test2 = {isRed: false, isGreen: true};
    });
<html>
<head>   
 <style type="text/css">
        body {color: black; font-size: 10px;}
        .redcolor {color: red; font-size: 20px}
        .greencolor {color: green; font-size: 100px}
  </style>
</head>
<body ng-app="app">
    <div ng-controller="controler">
          <span ng-class="{redcolor: test1.isRed, greencolor: test1.isGreen}">Span1</span><br/><br/>
    <span ng-class="{redcolor: test2.isRed, greencolor: test2.isGreen}">Span2</span>

    </div>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>  
</body>
</html>

Upvotes: 2

Related Questions