AngularJS ng-class 检查嵌套 key/value 对是否存在，然后将值添加为 class

Question

所以，我有一个无法修改其结构的嵌套数组。我想检查 key/value 对是否存在，如果存在，则向相关元素添加相应的 class。

我一直在尝试使用表达式的变体：

ng-class="{ 'active' : data.indexOf('"name":"john"') >= 0 }"

不过我的表达有点复杂，就这样用起来恐怕用不上。还有使用超过两层嵌套引号的问题。

这是一个 fiddle 使用与我正在使用的结构相似的数组的数组：

http://jsfiddle.net/5tvmL2Lg/2/

HTML:

<body ng-app="myModule">
<div ng-controller="myController">
  <div ng-repeat="hero in heroes">
    <div ng-class="{ 'weight-\'hero.stats.indexOf('\'type\':\'weight\'').value\'' : hero.stats.indexOf('\'type\':\'weight\'') >= 0 }">
            hello
     </div>
  </div>
</div>
</body>

JS:

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$scope',  function($scope) {

    $scope.heroes = [{
      "firstname" : "clark",
      "lastname" : "kent",
        "stats" : [
        {
        "type" : "height",
        "value" : "6'2"
        },
        {
        "type" : "weight",
        "value" : 220
        },
        {
        "type" : "hair",
        "value" : "brown"
        }
      ]},
      {
      "firstname" : "bruce",
      "lastname" : "wayne",
        "stats" : [
        {
        "type" : "height",
        "value" : "6'1"
        },
        {
        "type" : "hair",
        "value" : "black"
        }
      ]},
      {
      "firstname" : "peter",
      "lastname" : "parker",
        "stats" : [
        {
        "type" : "height",
        "value" : "5'11"
        },
        {
        "type" : "weight",
        "value" : 180
        },
        {
        "type" : "hair",
        "value" : "auburn"
        }
      ]}];

}]);

最后的目标是为 "clark kent" div 添加一个 class，例如 "weight-220"，没有 class "bruce wayne" div, "weight-180" 彼得·帕克 div.

我知道我的问题很复杂，但我们将不胜感激...:)

Answer 1

您不需要将所有代码逻辑添加到您的 ng-class 中。您可以使用 return 一个字符串的函数使其更复杂（以检查深层嵌套的对象）：

<div ng-repeat="hero in heroes">
    <div ng-class="ClassBuilder(hero)">
        hello
    </div>
</div>

在您的控制器中，添加此功能：

$scope.ClassBuilder = function(hero) {
    for (var i = 0; i < hero.stats.length; i++) {
        if (hero.stats[i].type == "weight") {
            return "weight-" + hero.stats[i].value;
        }
    }
}

这将从每个 ng-repeat 接收 hero 对象并检查 weight 类型是否存在。如果是这样，它将使用相应的 value 到 return 您请求的格式的字符串，例如："weight-220"。否则，它将 return 什么也不会应用到 <div>。

AngularJS ng-class 检查嵌套 key/value 对是否存在，然后将值添加为 class

AngularJS ng-class check if nested key/value pair exists and then add value as class

angularjs

multidimensional-array

indexof

ng-class