ng-class not working properly in 'AngularJs'

Question

In following program, as I type red in the input box, the paragraph must turn red in background. Also, why by default I am getting blue background in paragraph (It should be transparent as model is having null value on page load? Can someone help me ?

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <style>
    .red{background:red;}
    .blue{background:blue;}
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="color" />
    <p ng-class="{'red':color==red,'blue':color==blue}">This is a paragraph.</p>
<script>
    //1 module declaration
    var app = angular.module('myApp', []);
    //2 controller declaration
    app.controller('myCtrl',function($scope){
        //code here
    });
</script> 
</body> 
</html>

Use quotes in the string comparison. ng-class="{'red':color== 'red', 'blue': color== 'blue'}" Demo — Tushar
– Tushar, Commented Apr 13, 2016 at 7:21

deceze · Accepted Answer · 2016-04-13 07:22:59Z

4

You don't have any variables red or blue defined anywhere, so their value evaluates to undefined, which passes comparison differently than you expect.

Compare to the strings 'red' and 'blue', with quotes.

answered Apr 13, 2016 at 7:22

deceze♦

525k89 gold badges807 silver badges954 bronze badges

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

5 Comments

Tushar Over a year ago

Doesn't answer why blue by default

deceze Over a year ago

Because with the broken comparison blue is applied, and it has the highest precedence for the background.

Tushar Over a year ago

Tried in Chrome latest console. It gives false

deceze Over a year ago

Yeah, I corrected that statement. Angular's comparison works a bit differently (it doesn't throw a ReferenceError for one).

deceze Over a year ago

In Angular terms then: model with no value equals non existing variable.

Fred · Accepted Answer · 2016-04-13 07:32:33Z

1

Try to replace your code with:

<p ng-class="{'red':color==='red','blue':color==='blue'}">This is a paragraph.</p>

By default you had the following expression:

color==blue

By default color = null and the variable blue is undefined. So the expression null == undefined returned true, that's why your paragraph was in blue.

edited Apr 13, 2016 at 7:32

answered Apr 13, 2016 at 7:31

Fred

5,0361 gold badge26 silver badges21 bronze badges

6 Comments

Deadpool Over a year ago

But then same was case of red. Then why not red ?

Fred Over a year ago

Try to swap like this: 'blue':color==='blue','red':color==='red' and it will be red ;)

Deadpool Over a year ago

Ho ho ... Fred still question is same, why not first comparison and only the last or second one!

Fred Over a year ago

Cause you use the '==' comparator and not the '==='. With == -> null == undefined return true. With === -> null === undefined return false.

deceze Over a year ago

@Peterson Inspect your DOM. Both classes should be applied. But in your CSS rules, blue overrides red!

|

Collectives™ on Stack Overflow

ng-class not working properly in 'AngularJs'

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related