Ng-表ng-嵌套值重複

Question

我有這個列表我想在ng-table上顯示。

$scope.list = [ 
    { 
     "moduleId": 1, 
     "name": "Perancangan", 
     "level": 0, 
     "childs": [ 
      { 
       "moduleId": 12, 
       "name": "Perancangan Sektor", 
       "level": 1, 
       "childs": [], 
       "links": [ 
        { 
         "rel": "self", 
         "href": "http://103.8.160.34/mrf/modules/1" 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     "moduleId": 2, 
     "name": "Pengurusan Pengguna dan Peranan", 
     "level": 0, 
     "childs": [ 
      { 
       "moduleId": 17, 
       "name": "Pengurusan Pengguna", 
       "level": 1, 
       "childs": [], 
       "links": [] 
      }, 
      { 
       "moduleId": 18, 
       "name": "Operasi Peranan", 
       "level": 1, 
       "childs": [], 
       "links": [] 
      } 
     ], 
     "links": [ 
      { 
       "rel": "self", 
       "href": "http://103.8.160.34/mrf/modules/2" 
      } 
     ] 
    } 
]; 

我希望list.childs是與list.name爲分組表中的行，我會用NG-重複到，但不起作用。我能做的最多的事情就是將其顯示爲td。在看什麼IM是

 
    
    Perancangan (header) 
     Perancangan Sektor 
     Pengurusan Pengguna dan Peranan 
    

這裏是plunker http://plnkr.co/edit/77t5id3WOmbl2GSqYKh2?p=preview

Answer 1

好像有，你可以做到這一點，至少有兩種方式。第一個可能更簡單，但擺脫了你提出的問題。將列表[]按摩到適合此桌子視圖的扁平化和簡化的陣列中。然後你可以重複這個數組。

雖然這是一個真正的閃避，並完全避免了你的問題。更直接的問題你可以嘗試使用嵌套的ng-repeat，但這些都非常棘手。請參閱：http://vanderwijk.info/blog/nesting-ng-repeat-start/

最後，似乎最好地解決您的方法在意圖和精神上都是問題，即使用自定義過濾器。我寫了一個example fiddle，應該證明這個想法。

app.filter('flatten', function() { 

// Because this filter is to be used for an ng-repeat the filter function 
// must return a function which accepts an entire list and then returns 
// a list of filtered items. 
return function(listItems) { 
    var i,j; 
    var item, child; 
    var newItem; 
    var flatList = []; 

    // Begin a loop over the entire list of items provided by ng-repeat 
    for (i=0; i<listItems.length; i++) { 
     var item = listItems[i]; 

     // Construct a new object which contains just the information needed 
     // to display the table in the desired way. This means we just extract 
     // the list item's name and level properties 
     newItem = {}; 
     newItem.name = item.name.toUpperCase(); 
     newItem.level = item.level; 

     // Push the level 0 item onto the flattened array 
     flatList.push(newItem); 

     // Now loop over the children. Note that this could be recursive 
     // but the example you provided only had children and no grandchildren 
     for (j=0; j<item.childs.length; j++) { 
      child = item.childs[j]; 

      // Again create a new object for the child's data to display in 
      // the table. It also has just the name and level. 
      newItem = {}; 
      newItem.name = child.name; 
      newItem.level = child.level; 

      flatList.push(newItem); 
     } 
    } 

    // Return the newly generated array that contains the data which ng-repeat 
    // will iterate over. 
    return flatList; 
}; 
});