编程语言
首页 > 编程语言> > Javascript-在两个级别上的angularjs ng-repeat,但只有一个输出

Javascript-在两个级别上的angularjs ng-repeat,但只有一个输出

作者:互联网

我有一个看起来像这样的大物体:

scope.marketplaces = {

    first_example : { ... },
    second_example : { ... },

    ...

};

我正在尝试做的是遍历这样的大对象:

<section>
    <ul>
        <li ng-repeat="(key, value) in marketplaces"></li>
    </ul>
</section>

在循环中,再次循环每个对象,但不要将类似以下内容的内容附加到DOM:

<li> ... first level loop ...

    <li> ... second level loop ... </li>
</li>

我只想有一个< li< / li>尽管我正在遍历水平.之所以这样想,是因为我需要第一个循环中的键在级别循环中被引用,并且仍然只有一个li.

我已经读到ng-repeat =“朋友|过滤器:searchText”可以满足我的要求,但是我不确定是否可以在过滤器表达式中动态指定键或其他需要的内容,而不是searchText(我猜这是该对象的已知属性).

所以我的问题是,我能实现我刚才用过滤器解释的内容吗,还是有另一种方法呢?

解决方法:

我希望我已经理解了一个问题:您想在一个嵌套对象上使用一个ngRepeat.因此,将对象线性化.

第一种方法是创建过滤器:

app.filter('linear', function() {
  return function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    return result;
  };
});

并在thml中:

<li ng-repeat="(key, value) in marketplaces | linear">
          {{key}}: {{value}}
</li>

但是不幸的是,当在过滤器中创建新元素时,AngularJS会遇到问题.您可以在控制台中看到以下错误消息:

10 $digest iterations reached

如果没有使用$$hash进行黑客攻击,您目前将无法实现该功能(如果我输入错了,请纠正我).

因此,我认为目前的解决方案是在控制器中监视“市场”并使用与ngRepeat中使用的控制器相同的代码创建新对象:

$scope.$watch('marketplaces', function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    $scope.linearMarketplaces = result;

  }, true);

在HTML中:

    <li ng-repeat="(key, value) in linearMarketplaces">
      {{key}}: {{value}}
    </li>

两种解决方案的柱塞:http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview

标签:angularjs,ng-repeat,javascript
来源: https://codeday.me/bug/20191031/1974320.html