嵌套的ng-repeat與json奇怪的結果

我已經安裝了一個plunkr，因此演示了incase我解釋不正確。嵌套的ng-repeat與json奇怪的結果

我想循環遍歷一個對象的三層，並只用三個鍵過濾最後一層。

我已經設置了嵌套的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重複：

<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>

任何幫助將不勝感激。

來源

2015-11-23 Iamsamstimpson

這是因爲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

來源

2015-11-23 11:09:08

嵌套的ng-repeat與json奇怪的結果

回答

相關問題