ngRepeat 'track by' 표현 이해

ngRepeat 'track by' 표현 이해

angularjs에서의 ng-repeat 표현에 의한 트랙의 동작을 이해하기 어렵습니다.이 문서는 매우 희귀합니다.http://docs.angularjs.org/api/ng/directive/ngRepeat

데이터 바인딩 및 기타 관련 측면에서 이 두 코드 조각 간의 차이가 무엇인지 설명할 수 있습니까?

포함:track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

(동일한 출력)을 사용하지 않음

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>

넌 할 수 있다.track by $index데이터 원본에 중복된 식별자가 있는 경우

예:$scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

'id'를 식별자로 사용하는 동안에는 이 컬렉션을 반복할 수 없습니다(중복 ID:1).

기능하지 않음:

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

사용할 수 있습니다.track by $index:

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>

간단한 요약:

track by는 ng-repeat에 의해 작성된 DOM 세대(및 주로 재생성)와 데이터를 링크하기 위해 사용됩니다.

추가할 때track by기본적으로 angular에 지정된 컬렉션의 데이터 객체당 단일 DOM 요소를 생성하도록 지시합니다.

이 기능은 페이징 및 필터링 시 또는 오브젝트가 추가 또는 삭제될 때 유용합니다.ng-repeat목록.

보통, 없이track byangular는 expando 속성을 주입하여 DOM 객체를 컬렉션과 링크합니다.$$hashKey- JavaScript 객체로 변환하여 변경 시마다 재생성(및 DOM 객체 재관련성)합니다.

자세한 설명:

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

보다 실용적인 가이드:

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

(추적기준은 각도 > 1.2)

오브젝트 전체 대신 식별자(예를 들어 $index)로 오브젝트를 추적하고 나중에 데이터를 새로고침할 경우 ngRepeat는 컬렉션 내의 JavaScript 오브젝트가 새로운 오브젝트로 대체되어도 이미 렌더링된 아이템의 DOM 요소를 재구축하지 않습니다.

언급URL : https://stackoverflow.com/questions/22761340/understanding-the-ngrepeat-track-by-expression