2014-12-03 7 views
1

이 목록이 있습니다. ng-table에 표시하고 싶습니다. 중첩 된 값의 Ng-Table ng-repeat

$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.name와 테이블의 행 수하는 list.childs를 원했다, 난에 NG-반복 사용했던 있지만 작동하지 않습니다. 내가 할 수있는 일은 td로 표시하는 것입니다. 어떤 메신저보고 여기
 
    
    Perancangan (header) 
     Perancangan Sektor 
     Pengurusan Pengguna dan Peranan 
    

입니다 http://plnkr.co/edit/77t5id3WOmbl2GSqYKh2?p=preview

+1

그래서 Perlanangan 만 헤더로, 나머지는 자식으로 필요합니까? 목록에있는 모든 객체의 이름이 헤더가 아니겠습니까? – geckob

+0

예. 현재 [이름]은 머리글로만 필요합니다. – diehell

+0

그래서 list는 개체의 배열입니다. 배열에 두 개의 객체가 있습니다. 나는 당신이 원하는 것을 추측합니다. 목록에있는 모든 객체에 대해 이름을 헤더로, 객체의 자식을 자식으로 만듭니다. 권리? – geckob

답변

0

당신은이 작업을 수행 할 수있는 적어도 두 가지 방법이있을 것 같습니다 plunker입니다. 첫 번째 문장은 더 간단 할 수도 있지만 당신이 제기 한 질문을 치장 할 수도 있습니다. 목록 []을이 표의보기에 맞게 단순화되고 단순화 된 배열로 마사지합니다. 그런 다음 배열을 반복합니다.

그건 정말 피할 수 있지만 완전히 귀하의 질문을 피하십시오. 질문에 더 직접적으로 중첩 된 반복을 사용하려고 할 수는 있지만 매우 까다 롭습니다. 참조 : 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; 
}; 
}); 
+0

고맙습니다. 나는 flatten을 사용하고 그것에 대한 필터를 쓴다. – diehell