【问题标题】：Add ng-class with expression false添加带有表达式 false 的 ng-class
【发布时间】：2016-05-19 10:12:23
【问题描述】：

您好，我有一个包含列表的对象，我想在我的 html 中循环使用 ng-repeat。该列表是键值，值是真或假。在我的 html 中，我有一个带有类和自己的背景颜色的 div。因此，当我执行 ng-repeat 时，我想检查列表中的值是否为 false 并添加一个具有新背景颜色的新类。我在这个 ng-class 中使用了一个表达式，但它不起作用。这是我的对象：

$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
        }
    }
]

然后我得到了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>

这是我的 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;}

当它不改变颜色时，它是假的。我也试过ng-class="{cWhite: item.Properties.P1 == false}"。

我用这种方式添加了几次带有 ng-class + 表达式的类，但现在它不起作用。也许我的重复或我的列表是错误的。

谢谢！

【问题讨论】：

标签： html angularjs ng-repeat ng-class

【解决方案1】：

您的范围对象无效。在Name 值之后，您错过了几个,。

// 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>

【讨论】：

您好，感谢您的回答！在我的原始代码中，名称后面有逗号，当我写这个问题时，这只是一个错字！逗号也不能正常工作...
@MrBuggy 当你运行这个 sn-p 时，有白色和蓝色方块。
是的，但是尝试为 cMyBox div 使用三种不同的颜色（直接在标签中设置背景颜色或使用自己的类）...

【解决方案2】：

这是css类定义顺序的问题。把你的 .cWhite{background-color: white;} 放在最后。因为 cWhite 和 cColor1,cColor2,cColor3 处于同一范围级别，浏览器将采用第一个并保留其余的背景颜色值。我相信这应该可以解决您的问题

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

【讨论】：

您好，感谢您的回答！在我的原始代码中，名称后面有逗号，当我写这个问题时，这只是一个错字！逗号也不能正常工作...
@MrBuggy 您可能会丢失一些未加载的文件。我尝试使用您的代码。它工作得很好。我想你必须再试一次。
您好，我收到了错误：在我的原始代码中，我在这里做了以下不同之处：我在每个 div "cMyBox" 中直接在标签中放入了一个具有不同 rgb-color 的样式属性。当我在三个 div 中的每一个的类中删除它时，它可以工作。当我直接在标签中执行此操作时，它没有人知道为什么。谢谢
当我在 myBox 类中只添加一种颜色（例如红色）并删除颜色类 1,2 和 3 时，它可以工作...
prasad HS 我试过了，它不起作用......唯一对我有用的解决方案是我自己对这个问题的回答（请参阅底部的我的 sn-p）谢谢

【解决方案3】：

您的 $scope.list json 格式不正确，"," 丢失

正确的Json附在下面：

$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
                            }
                        }
                    ]

现在应该可以正常工作了。

【讨论】：

您好，感谢您的回答！在我的原始代码中，名称后面有逗号，当我写这个问题时，这只是一个错字！逗号也不能正常工作...

【解决方案4】：

我找到了解决方案：我有 cColor1、cColor2 和 cColor3 三个不同背景颜色的类。我将这些类添加到我的 div 的类属性中，并尝试使用 ng-class 表达式将其更改为白色，如果我的列表中的属性为 false。所以这行不通。在我从 div 中的属性类中删除 cColor1、cColor2 和 cColor3 类并将其放入 ng-class 表达式之后。

所以当它为假时它添加白色，当它为真时它添加具有该颜色的特定类的特定颜色。那是我的解决方案。

// 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>

谢谢

【讨论】：

【解决方案5】：

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

cWhite 必须是字符串，写成如下

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

而不是

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

编辑：

CSS

在下一行添加 CSS

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

【讨论】：