다른 지침과 조합 된 ngRepeat

Question

심각한 문제가 있습니다. I 은이 일부 결합 된 데이터가있는 테이블 뷰를 구현해야합니다. 테이블 행에 일부 데이터를 표시해야하고 다음 행은이 행에 대한 세부 정보 여야합니다. 그 이상의 경우 사용자는 행을 클릭하는 세부 정보를 숨길 수 있어야합니다.

예를 들어, 모델은 일부 사람의 이름과 성입니다. 그에게는 아이가 있고, 그의 이름이 다음 행에 표시되어야합니다. 내 모델에 따르면 자녀 이름은 아빠의 속성에 저장됩니다.이 속성은 개체 자체와 비슷한 배열입니다. 아이들은 다른 아이들을 가질 수 없습니다.

문제는 ngRepeat 루프를 한 번 실행하면 여러 테이블 행을 처리 할 수 ​​없다는 것입니다. 또한 ng-repeat의 transclude가 'element'로 설정되어 있기 때문에 다른 지시문을 추가하려고 시도했지만 도움이되지 않았습니다. 그 후 ng-repeat 지시문을 수정하려고 시도했지만 거의 결과를 얻었지만 지시문 컴파일 기능의 중간에 요소를 만들어야했습니다. 이는 코드가 매우 더러워지며 지원하기 어려울 것이므로 매우 나쁜 생각입니다.

if (!last) { 
    linker(childScope, function(clone){ 
     var el = clone; //angular.element(template); 
     cursor.after(el); 
     if (!childScope.item.innerHidden) { 
      for (var i = 0; i < childScope.item.innerItems.length; i++) { 
       var innerItem = childScope.item.innerItems[i]; 
       console.log(innerItem); 
       var elem = angular.element('<tr><td>' + innerItem.value1 + '</td><td>' + 
        innerItem.value2 + '</td></tr>'); 
       el.after(elem); 
       el = elem; 
      } 
     } 
     last = { 
      scope: childScope, 
      element: (cursor = el), 
      index: index 
     }; 
     nextOrder.push(value, last); 
    }); 
} 

내가 무엇을 할 수 있습니다 (변경된 부분 만 표시) :

이것은 내가 NG 반복 지침을 수정하는 방법입니다? 나는 아이의 부모가 될 수있는 HTML 태그를 생각하고 있었는데, 가능 했습니까? ng-repeat를 적용하고 테이블 행을 관리 할 수 ​​있습니다. 아니면 다른 흥미로운 가능성이 있습니까?

Answer 1

tbody 태그에 외부 ng-repeat를 배치합니다. 테이블에는 여러 tbody가 포함될 수 있으며 동일한 개체를 공유하는 여러 행을 가질 수 있습니다. 어린이 행 숨기기에는 여러 옵션이 있습니다. 나는보기에 쉬운 것을 선택했다. 뷰에 대한 플래그로 모델을 폴 레이트 (polute)했기 때문에 아마 최선의 방법은 아니지만, 이것을 수행하는 방법에 대한 좋은 아이디어를 줄 것입니다.

이의 말을하자이 모델입니다 :

$scope.family = [ 
    { 
     name : 'Bob', 
     age : 34, 
     children : [ 
     { 
      name: 'Robert', 
      age: 12 
     }, 
     { 
      name: 'Paul', 
      age: 10 
     } 
     ], 
     show:true 
    }, 
     { 
     name : 'Mike', 
     age : 23, 
     childrens : [], 
     show:true 
    } 
    ] 

당신은 쇼 속성을 알 수 있습니다. 그것은 뷰 행 숨기기 트릭에 사용됩니다 ... 내가 말했듯이, 당신은 이것을 할 수있는 더 좋은 방법을 찾아야합니다.

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="person in family"> 
     <tr ng-click="showChildren(person)"> 
     <td>{{person.name}}</td> 
     <td>{{person.age}}</td> 
     </tr> 
     <tr class="child" ng-show="person.show" ng-repeat="child in person.children"> 
     <td>{{child.name}}</td> 
     <td>{{child.name}}</td> 
     </tr> 
    </tbody> 
    </table> 

당신은 첫 번째 TR 두 번째 TR에 NG-쇼에 NG가 클릭 알 수 있습니다 :

이 표를 사용하여 데이터를 표시합니다. 여기서 중첩 된 행을 숨기는 마법이 발생합니다. 컨트롤러에이 메서드를 추가하면 작동합니다!

$scope.showChildren = function(person){ 
    person.show = !person.show; 
    } 

어쨌든 ...이 플 런커를 확인하십시오. 작동하는 예입니다. 더 쉽게 이해할 수 있습니다!

http://plnkr.co/edit/fO7LWN