Add ng-class with expression false

Question

Hi I got a object with a list within I would like loop in my html with a ng-repeat. The list is key-value and the value is true or false. In my html I have a div with a class and a own background-color. So when I do the ng-repeat, I would like to check, if the value in the list is false and add a new class with a new background-color. I used for this ng-class with an expression, but it does'nt work. This is my object:

$scope.list = [
    {
        "Name" : "Jacob",
        "Properties" : {
               "P1": true,
               "P2": true,
               "P3": false
        }
    },
    {
        "Name" : "James",
        "Properties" : {
               "P1" : false,
               "P2" : true,
               "P3" : true
        }
    },
    {
        "Name" : "Hector",
        "Properties" : {
               "P1" : false,
               "P2" : false,
               "P3" : true
        }
    }
]

Then I got follow html:

<div ng-repeat="item in list">
    <div class="myContainer">
        <div class="cMyBox cColor1" ng-class="{cWhite: !item.Properties.P1}"></div>
        <div class="cMyBox cColor2" ng-class="{cWhite: !item.Properties.P2}"></div>
        <div class="cMyBox cColor3" ng-class="{cWhite: !item.Properties.P3}"></div>
    </div>
</div>

And this is my css:

.myContainer {display: flex; flex-direction: row;}
.cMyBox {width: 20px; height: 20px; background-color: blue;}
.cWhite{background-color: white;}
.cColor1 {background-color: red;}
.cColor2 {background-color: blue;}
.cColor3 {background-color: green;}

And the moment it does'nt change the color, when it's false. I also tried with ng-class="{cWhite: item.Properties.P1 == false}".

I used this way to add a class with ng-class + expression a few times, but now it does'nt work. Maybe my repeat or my list is wrong.

Thanks!

Magicprog.fr · Accepted Answer · 2016-05-19 11:32:46Z

2

Your scope object is invalid. You missed few , after Name value.

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.list = [{
    "Name": "Jacob",
    "Properties": {
      "P1": true,
      "P2": true,
      "P3": false
    }
  }, {
    "Name": "James",
    "Properties": {
      "P1": false,
      "P2": true,
      "P3": true
    }
  }, {
    "Name": "Hector",
    "Properties": {
      "P1": false,
      "P2": false,
      "P3": true
    }
  }];

});

.myContainer {
  display: flex;
  flex-direction: row;
}
.cMyBox {
  width: 20px;
  height: 20px;
  background-color: blue;
}
.cWhite {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in list">
    <div class="myContainer">
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P1}"></div>
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P2}"></div>
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P3}"></div>
    </div>
  </div>

</body>

edited May 19, 2016 at 11:32

answered May 19, 2016 at 10:21

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

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

3 Comments

webta.st.ic Over a year ago

Hi and thanks for your answer! In my original code the comma is there after name, it was just a typo here when I wrote this question! Also with the comma it does'nt work correctly...

Magicprog.fr Over a year ago

@MrBuggy When you run this snippet, there is white and blue squares.

webta.st.ic Over a year ago

Yes, but try it with three different colors for the cMyBox div (setting background-color directly in tag or with a own class)...

Venu prasad H S · Accepted Answer · 2016-05-19 12:35:04Z

1

This is the problem with the order in which the css class is defined. Put your .cWhite{background-color: white;} to the last. because cWhite and cColor1,cColor2,cColor3 are in the same scope level, the browser will take the first one and leave the rest of the backgroud-color value. I believe this should solve your problem

.myContainer {display: flex; flex-direction: row;}
.cMyBox {width: 20px; height: 20px; background-color: blue;}
.cColor1 {background-color: red;}
.cColor2 {background-color: blue;}
.cColor3 {background-color: green;}
.cWhite{background-color: white;}

edited May 19, 2016 at 12:35

answered May 19, 2016 at 10:27

Venu prasad H S

2411 silver badge8 bronze badges

6 Comments

webta.st.ic Over a year ago

Hi and thanks for your answer! In my original code the comma is there after name, it was just a typo here when I wrote this question! Also with the comma it does'nt work correctly...

Venu prasad H S Over a year ago

@MrBuggy you may be missing some files that are not loaded. I tried using your code. It worked perfectly. I think you must try it once again.

webta.st.ic Over a year ago

Hi I got the error: In my original code, I made follow difference to this here: I put in every div "cMyBox" a style attr with a different rgb-color directly in the tag. When I remove it in a class for each of the three divs, it works. When I do it directly in the tag, it does'nt has someone an idea why. Thanks

webta.st.ic Over a year ago

When I put just one color for example red in the class myBox and remove the color-class 1,2 and 3, it works...

webta.st.ic Over a year ago

prasad HS I tried it, it doesn't work... The only solution worked for me is my own answer to this question (please see my snippet at the bottom) thanks

|

Suneet Bansal · Accepted Answer · 2016-05-19 10:30:39Z

1

Your $scope.list json is not well formed, "," is missing

Correct Json is attached below:

$scope.list = [
                        {
                            "Name" : "Jacob",
                            "Properties" : {
                                   "P1": true,
                                   "P2": true,
                                   "P3": false
                            }
                        },
                        {
                            "Name" : "James",
                            "Properties" : {
                                   "P1" : false,
                                   "P2" : true,
                                   "P3" : true
                            }
                        },
                        {
                            "Name" : "Hector",
                            "Properties" : {
                                   "P1" : false,
                                   "P2" : false,
                                   "P3" : true
                            }
                        }
                    ]

It should work fine now.

answered May 19, 2016 at 10:30

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

1 Comment

webta.st.ic Over a year ago

Hi and thanks for your answer! In my original code the comma is there after name, it was just a typo here when I wrote this question! Also with the comma it does'nt work correctly...

webta.st.ic · Accepted Answer · 2016-05-19 12:05:17Z

I found the solution: I have the classes cColor1, cColor2 and cColor3 with three different background-color. I added this classes to the class attribut of my div and tried to change it with an ng-class expression to white, if a property in my list is false. So this doesn't work. After I removed the cColor1, cColor2 and cColor3 classes from my attribut class in the div and put it in the ng-class expression.

So it adds the white-color when it's false and when it's true it adds the specific color with the specific class for this color. That was my solution.

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.list = [{
    "Name": "Jacob",
    "Properties": {
      "P1": true,
      "P2": true,
      "P3": false
    }
  }, {
    "Name": "James",
    "Properties": {
      "P1": false,
      "P2": true,
      "P3": true
    }
  }, {
    "Name": "Hector",
    "Properties": {
      "P1": false,
      "P2": false,
      "P3": true
    }
  }];

});

.myContainer {
  display: flex;
  flex-direction: row;
}
.cMyBox {
  width: 20px;
  height: 20px;
}
.cWhite {
  background-color: white;
}
.cColor1 {
  background-color: blue;
}
.cColor2 {
  background-color: red;
}
.cColor3 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in list">
    <div class="myContainer">
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P1, cColor1: item.Properties.P1}"></div>
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P2, cColor2: item.Properties.P2}"></div>
      <div class="cMyBox" ng-class="{cWhite: !item.Properties.P3, cColor3: item.Properties.P3}"></div>
    </div>
  </div>

</body>

Thanks

Alpan Karaca · Accepted Answer · 2016-05-19 12:39:37Z

0

<div class="cMyBox cColor1" ng-class="{cWhite: !item.Properties.P1}"></div>

cWhite must be string and written as following

ng-class="{'cWhite': !item.Properties.P1}"

instead of

ng-class="{cWhite: !item.Properties.P1}"

Edit:

CSS

add CSS following line

.cWhite{background-color: white!important;}

edited May 19, 2016 at 12:39

answered May 19, 2016 at 11:15

Alpan Karaca

9685 gold badges12 silver badges30 bronze badges

Collectives™ on Stack Overflow

Add ng-class with expression false

5 Answers 5

3 Comments

6 Comments

1 Comment

Comments

Edit:

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

6 Comments

1 Comment

Comments

Edit:

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related