带有 json 奇怪结果的嵌套 ng-repeat

Question

我已经设置了一个 plunkr 以防我解释不正确。

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

我已经设置了嵌套的 ng-repeat 循环，但该循环的行为与我预期的不同。

我正在使用的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>

如有任何帮助，我们将不胜感激。

Answer 1

这是因为 ng-repeat 也将键 Name 解析为一个对象，所以你有一个空的 <li>

使用ng-if添加条件此示例与您的代码配合得很好：

 <ul>
      <li ng-repeat="e in list" ng-if="e.Name!=null"> 
        {{e.Name}}
        <ul>
          <li ng-repeat="f in e" ng-if="f.Name!=null">
            {{f.Name}}
            <ul>
              <li ng-repeat="g in f" ng-if="g.Name!=null">
                {{g.Name}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

这里是你的代码中的一个工作 plunker：http://plnkr.co/edit/HUvl6OlbIUF7FTgDQLAY?p=preview

带有 json 奇怪结果的嵌套 ng-repeat

Nested ng-repeat with json strange result

json

angularjs

ng-repeat