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


101

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>

아주 좋은 답변과 함께 좋은 질문입니다! OP가 답변을 수락하지 않은 것이 얼마나 유감 스러운가? 또는 질문에 대한 답변이 정확하지 않다고 생각하십니까?
Mawg는 분석 재개 모니카 말한다

네가 옳아! 방금 TJ의 대답을 받아 들였습니다.
Jonathan Grupp

답변:


96

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>

1
답변 해 주셔서 감사합니다! 그러나 중복 식별자가 유일한 사용 사례는 아닙니다. 또한 '내부'에서 무슨 일이 일어나고 있는지 알고 싶습니다.
Jonathan Grupp

2
음, 간단합니다. 코드를 살펴보면 모두 오픈 소스입니다.)
nilsK

4
이 질문은 오래되었지만 여전히 이것이 훨씬 더 잘 이해하는 데 도움이 될 것이라고 생각합니다. bennadel.com/blog/… 여기에 설명의 짧은 버전 docs.angularjs.org/error/ngRepeat/dupes
Annapoorni D

3
한 가지 더 고려해야 할 점은 키별 트랙을 사용할 수 있으면 더 나은 성능을 얻을 수 있다는 것입니다 (blog.500tech.com/is-reactjs-fast). 이 기능을 사용하면 고유 식별자를 사용하여 JavaScript 개체를 ngRepeat DOM (문서 개체 모델) 노드와 연결할 수 있습니다. 이 연결을 사용하면 AngularJS는 불필요하게 DOM 노드를 $ 파괴하거나 다시 생성하지 않습니다. 이는 엄청난 성능 및 사용자 경험 이점을 가질 수 있습니다 ( bennadel.com/blog/… ).
Braulio

700 개의 이상한 아이템 목록이 있습니다. 렌더링 시간은 4 초에서 100ms로 변경되었습니다. 나머지에서 가져온 데이터를 기반으로하는 모든 ngRepeat에 대해 추적 기준을 사용해야합니다.
Patrick

60

짧은 요약 :

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에서 사용할 수 있습니다)


8

전체 개체 대신 식별자 (예 : $ index)로 추적하는 개체로 작업하고 나중에 데이터를 다시로드하는 경우, ngRepeat 컬렉션의 JavaScript 개체에 이미 렌더링 된 항목에 대한 DOM 요소다시 빌드하지 않습니다. 새로운 것으로 대체되었습니다.


이것을 증명하는 참조가 있습니까?
azerafati

강제로 다시 렌더링하는 방법이 있습니까? 또는 다른 해결 방법? 나는 이것을 어디에도 언급하지 않았지만 이것이 나를 엉망으로 만드는 것이라고 믿고 이미 많은 시간을 낭비했습니다.
NeverGiveUp161

1
추적 기준을 사용하지 않거나 개체 변경시 고유 식별자를 변경합니다. $ index를 변경할 수 없습니다. 대신 $ index를 사용하지 않는 것이 좋습니다. 대신 개체에 고유 한 식별자 (예 : id)를 사용합니다.
ram1993
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.