嵌套的ng-repeat与json奇怪的结果

时间:2015-11-23 10:58:10

标签: json angularjs ng-repeat

我已经设置了一个plunkr,所以证明我错误解释。

我想遍历一个对象的三层,只用三个键过滤最后一层。

我已经设置了嵌套的ng-repeat循环,但循环不符合我的预期。

Demo of the code on Plunkr

enter image description here

我正在使用的JSON。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

      $scope.list = [{
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, {
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, {
        'Name': 'level 0',
        'two': {
          'Name': 'level 1',
          'three': {
            'Name': 'level 2'
          }
        }
      }, ]
    });

嵌套的ng-repeat:

<div>============= one level list =============</div>
<ul>
  <li ng-repeat="e in list">{{e.Name}}</li>
</ul>
<div>============= two level list =============</div>
<ul>
  <li ng-repeat="e in list"> 
    {{e.Name}}
    <ul>
      <li ng-repeat="f in e">
        {{f.Name}}
      </li>
    </ul>
  </li>
</ul>  
<div>============= three level list =============</div>
<ul>
  <li ng-repeat="e in list"> 
    {{e.Name}}
    <ul>
      <li ng-repeat="f in e">
        {{f.Name}}
        <ul>
          <li ng-repeat="g in f">
            {{g.Name}}
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>  

非常感谢任何帮助。

0 个答案:

没有答案