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!

Answer 1

<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;}

Answer 2

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;}

Answer 3

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

Answer 4

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>

Answer 5

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.