gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:20:46 26 4
gpt4 key购买 nike

所以,我有这个嵌套数组,我无法修改其结构。我想检查键/值对是否存在,如果存在,则向相关元素添加相应的类。

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

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 添加一个名为“weight-220”的类,为“bruce wayne”div 添加一个没有类,为 Peter Parker 添加一个名为“weight-180”的类分区。

我知道我的问题很复杂,但任何帮助将不胜感激......:)

最佳答案

您不需要将所有代码逻辑添加到 ng-class 中。您可以通过使用返回字符串的函数使其变得更复杂(以检查深层嵌套的对象):

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

在您的 Controller 中,添加此函数:

$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 检查嵌套键/值对是否存在,然后将值添加为类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38778291/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com