因此,我有一个无法修改其嵌套结构的嵌套数组。我想检查键/值对是否存在,如果存在,请将相应的类添加到有问题的元素中。
我一直在尝试使用表达式的一种变体:
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"
}
]}];
}]);
最后,目标是为“ clark kent” div添加一个名为“ weight-220”的类,为“ bruce wayne” div添加一个类,为peter parker div添加“ weight-180”。
我知道我的问题很复杂,但是任何帮助将不胜感激... :)
最佳答案
您无需将所有代码逻辑都添加到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 - AngularJS ng-class检查嵌套键/值对是否存在,然后将值添加为类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38778291/