AngularJS : 세부 테이블 행 추가/삭제

나는 일련의 데이터를 보여주는 중첩 된 ng-repeat으로 작성된 테이블과 함께 각도 1.4.12 앱이 있습니다.AngularJS : 세부 테이블 행 추가/삭제

<tr ng-repeat-start="item in pmt.table.data"> 
    ...main data... 
</tr> 
<tr class="table-details" ng-repeat-end="item in pmt.table.data"> 
    <td colspan="15"> 
     <div uib-collapse="!item.showDetails"> 
     <div class="table-details-content">hello world</div> 
     </div> 
    </td> 
</tr>

각 행에는 세부 정보가 포함 된 추가 행을 보여주는 공개 아이콘이 있습니다.

이전에는 모든 데이터를로드하고 앵귤러 UI 부트 스트랩의 "축소"지시어를 사용하여 세부 행을 숨기거나 표시했습니다.

이 펜에 전체 일을 볼 수 있습니다 레코드가 많은 양의 데이터가있는 경우 https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010

이 방법의 문제는 분명이되었다; json 데이터의 1000 행과 같은 단방향 바인딩을 사용 함에도 불구하고 성능이 너무 느립니다.

내가 대신 할 거라고하는 것은에 하지는 세부 행이 는 즉시에 행을 생성하고 부모 행 ID를 기반으로 데이터를 가져 오기 후 공개 아이콘을 클릭하면 전혀 포함하고 있습니다 . 공개 아이콘이 닫히면 세부 행을 삭제합니다.

저는 jQuery를 사용하여이 작업을 수행했습니다. 그러나 Angular를 사용하여 접근하는 방법에 대해서는 약간 분실되어 있습니다.

출처

2016-07-28 Steve

근무? 우선, ID가 주어진 세부 정보를 검색하려면 서비스 클라이언트가 필요하고 나머지는 인터페이스 작업이되어야합니다. 어느쪽에 붙어 있니? –

ng-if를 사용하여 소화하지 않을 행을 결정하십시오. – bresleveloper

ng-if를 사용하십시오.

ngIf 지시문은 {expression}을 기반으로 DOM 트리의 일부를 제거하거나 다시 만듭니다. ngIf에 할당 된 표현식이 거짓 값으로 평가되면 요소가 DOM에서 제거되고, 그렇지 않으면 요소의 복제본이 DOM에 다시 삽입됩니다. 당신이 원하는,하지만 당신은 당신이 다시 데이터 바인딩을 필요로한다 스코프 상속에 특별한주의를 지불 할 것이다 - ng-if 완전히 새로운 범위를 생성 (및 파괴) 것을
는

참고.

 <td colspan="15"> 
     <!--Change uib-collapse to ng-if--> 
     <div ng-if="item.showDetails"> 
      <div class="table-details-content">hello world</div> 
     </div> 
     </td>

당신이 시도 무엇 Codepen

출처

2016-07-28 14:00:50 CozyAzure

이는 uib-collapse 방법보다 나은 해결책입니다. 그러나 1000 행을 사용하면로드 성능이 너무 느립니다. 타임 라인의 스크립트 부분은 로컬 데이터의 경우에도 5 초가 넘습니다. – Steve

알겠습니다. 지금은'ng-if'가 DOM 엘리먼트를 생성하고 파괴 할 수있는 가장 가까운 솔루션입니다. 너무 나쁘다면 여전히 뒤떨어져 있습니다. (어쩌면 당신은 4 배 이상 빨라지는 ng2로 이동해야합니다. D 어쨌든 브라우저의 전체 관찰자 수는 약 2k가 될 것이고 다른 장소를 볼 수도 있습니다 코드를 추가로 최적화 할 수 있는지 확인하십시오. – CozyAzure

AngularJS : 세부 테이블 행 추가/삭제

답변

관련 문제