여러 특성에 걸쳐 트랙 바이 트랙이 있는 ng-repeat

여러 특성에 걸쳐 트랙 바이 트랙이 있는 ng-repeat

각 ng-repeat 명령에 문제가 있습니다.현재 저는 API에서 항목 목록을 가져오는 일부 프로젝트를 작업하고 있으며(때로는 1k 항목이 될 수 있음) 이 목록은 5초마다 새로 고쳐야 합니다(관련 프로젝트를 모니터링하고 있습니다).

목록 길이가 조금 더 크면 DOM을 다시 렌더링하는 동안 웹 사이트가 "느릴" 수 있습니다.각도가 DOM 전체를 재생하는 것으로 나옵니다. (단, 95% 아이템은 동일!)

가능한 접근 방식 중 하나는 예를 들어 "track by" 식을 item.id 로 설정하는 것입니다.하지만 여기 또 다른 문제가 발생합니다. 예를 들어 설명이 다른 사용자에 의해 변경되었을 때 아이템을 재생성하고 싶습니다.track by가 item.id 항목 변경에 대한 식이므로 description이 DOM에서 항목을 업데이트하지 않았습니다.

여러 개의 속성에 걸쳐 추적할 수 있는 방법이 있습니까?기능이 있을까요?아니면 "손"으로 비교를 할까요?

어떤 아이디어나 코드 샘플이라도 감사히 받겠습니다 :)

갱신하다

item.id 각도로 트랙을 설정했을 때 발견된 것은 항목에 대한 HTML을 다시 crete하지 않고 이미 생성된 요소의 값만 업데이트하고 "faster"한 다음 제거 및 생성하는 것 같습니다.전에는 조금 다르게 생각했습니다.

고치다

item.id 의 ng-repeat USE 트랙에서 >1k 아이템 이상의 성능을 원하는 사람들에게 성능을 향상시켜 줄 것입니다 ;)

다중 속성별 추적을 처리하기 위해 함수를 만들 필요는 없습니다.다음을 수행할 수 있습니다.

<div ng-repeat="item in lines track by item.id+item.description">

댓글을 통해 다음과 같은 시도를 할 수 있음을 알 수 있습니다.

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)">

컨트롤러에서:

$scope.itemTracker= function(item) {
  return item.id + '-' + item.description;
}

이렇게 하면 목록이 변경될 때 재렌더링되는 DOM 요소의 수가 증가할 수 있습니다.

제가 아는 바로는 angularjs 모델이 ui 뷰에 바인딩되어 있어서 값이 변경되면 $apply 또는 $digest를 통해 모델이 다시 렌더링됩니다.따라서 당신의 경우 모델 값을 ui view에 바인딩할 수 있지만 값이 변경되지 않은 경우에는 view를 다시 render하고 싶지 않습니다.이것이 제가 아는 것입니다.

그러나 돔 요소를 조작할 수 있습니다.예를 들어, 데이터를 변수에 저장

var x = [{id:"id1",value:"v1"},{id:"id2",value:"v2"}]

html에서 수동으로 추가하거나 명령을 사용하여 추가한 다음 요소에 ID를 할당합니다.

<div id="id1">v1</div>

필요에 따라 값을 확인하고 비교합니다.찾은 다음 angular. element("#yourid") 텍스트를 입력합니다.

이렇게 하면 브라우저 리소스 소비 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/28232122/ng-repeat-with-track-by-over-multiple-properties