Question

所以，我有这个嵌套数组，我不能修改它的结构。我想检查是否存在键/值对，如果存在，则将相应的类添加到相关元素中。

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

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

然而，我的表达有点复杂，我担心它的使用太多了。还有使用两个以上级别嵌套引号的问题。

这是一个使用阵列的小提琴，其结构与我正在使用的阵列相似：

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

}]);

最终目标是添加一个名为例如＆＃34; weight-220＆＃34;对于＆＃34;克拉克肯特＆＃34; div，没有班级的布鲁斯·韦恩＆＃34; div，＆＃34; weight-180＆＃34;为彼得帕克div。

我知道我的问题很复杂，但任何帮助都会非常感激......：）

Answer 1

您无需将所有代码逻辑添加到ng-class。您可以通过使用返回字符串的函数使其更复杂（以检查深层嵌套的对象）：

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

这将从每个hero收到ng-repeat个对象，并检查weight类型是否存在。如果是这样，它将使用相应的value以您请求的格式返回一个字符串，例如：“weight-220”。否则，它将不返回任何内容，并且不会将任何类应用于<div>。

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

1 个答案: