编辑：

Question

嗨我有一个带有列表的对象我希望在我的html中使用ng-repeat循环。该列表是键值，值为true或false。在我的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
        }
    }
]

然后我跟着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 +表达式的类几次，但现在它确实没有用。也许我的重复或我的清单是错误的。

谢谢！

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类的顺序的问题。将 .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格式不正确，＆＃34;，＆＃34;缺少

正确的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

我找到了解决方案：我有三种不同背景颜色的cColor1，cColor2和cColor3类。我将这些类添加到我的div的类attribut，并尝试使用ng-class表达式将其更改为白色，如果列表中的属性为false。所以这不起作用。从div中的attribut类中删除了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>

由于

添加表达式为false的ng-class

5 个答案:

编辑：

CSS