ng-class scope variable not working

Question

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.

Sajeetharan · Accepted Answer · 2017-05-14 07:17:41Z

2

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>

answered May 14, 2017 at 7:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Learner Over a year ago

Thank you, I am using eclipse IDE for development so not able to find the basic mistakes. Can you please suggest a better IDE for developing AngularJS apps that can give suggestions and corrections.

Sajeetharan Over a year ago

You can use visual studio code and use the angular snippets and intellisence it will auto detect the errors for you

Learner Over a year ago

I am from Java background, so was using eclipse. Is Visual Studio code is free software, can I use it for my project?

Sajeetharan Over a year ago

yes you can use it for your project. if you need a light weight ide go for sublime text

Collectives™ on Stack Overflow

ng-class scope variable not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related