添加带有表达式 false 的 ng-class

Question

您好，我得到了一个包含列表的对象，我想在我的 html 中使用 ng-repeat 进行循环。该列表是键值对，值为 true 或 false。在我的 html 中，我有一个带有 class 和自己的背景颜色的 div。因此，当我执行 ng-repeat 时，我想检查列表中的值是否为 false 并添加具有新背景颜色的新 class。我用这个 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
        }
    }
]

然后我得到了关注 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 + 表达式添加了一个 class 几次，但现在它不起作用。也许我的重复或我的列表是错误的。

谢谢！

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

Answer 2

这是 css class 定义顺序的问题。把你的 .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;}

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

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

Answer 4

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

Answer 5

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

所以当它为 false 时它会添加白色，当它为 true 时它会添加特定的颜色以及该颜色的特定 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>

谢谢

添加带有表达式 false 的 ng-class

Add ng-class with expression false

html

angularjs

ng-repeat

ng-class

编辑：

CSS