ngRepeat '추적 기준'표현식 이해

ngRepeat '추적 기준'표현식 이해

---

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할 때 기본적으로 주어진 컬렉션의 데이터 개체 당 단일 DOM 요소를 생성하도록 angular에 지시합니다.

이는 페이징 및 필터링시 또는 개체가 ng-repeat목록 에서 추가 또는 제거되는 경우에 유용 할 수 있습니다 .

일반적으로 track by각도가 없으면 확장 속성을 $$hashKeyJavaScript 개체 에 삽입하여 DOM 개체를 컬렉션 과 연결하고 변경 될 때마다 다시 생성 (및 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