因此,我有一个无法修改其嵌套结构的嵌套数组。我想检查键/值对是否存在,如果存在,请将相应的类添加到有问题的元素中。

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

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/

10-09 06:08
查看更多