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

因此，我有这个嵌套数组，我无法修改其结构。我想检查一个键/值对是否存在，如果存在，请向相关元素添加相应的类。AngularJS ng-class检查是否存在嵌套的键/值对，然后将值作为类

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

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

}]);

在目标的最终目标是为“c”添加一个名为例如“weight-220”的类百灵肯定的“div，”bruce wayne“div的上课，以及peter parker div的”weight-180“。

我知道我的问题是令人费解，但任何帮助，将不胜感激... :)

来源

2016-08-04 jeanmarc

你并不需要添加的所有代码逻辑到您的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; 
     } 
    } 
}

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

来源

2016-08-04 22:43:28

好的，非常感谢Dr. Cool，这正是我想要的，而且它比我想象的要简单......现在我觉得很愚蠢，但无论如何非常感谢您的帮助！ – jeanmarc

btw我可以问你重量变量是什么吗？ – jeanmarc

哦，哎呀......我打算这样做：''返回'weight-'+ weight''但忘记这么做，只是返回值本身。你可以删除''weight =''行。 –

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

回答

相关问题