ng-lặp lại với theo dõi bởi nhiều thuộc tính

Question

Tôi gặp vấn đề với chỉ thị ng-lặp góc. Hiện tại tôi đang làm việc trên một số dự án từ API tôi nhận được một danh sách các mục (một số lần nó có thể là 1k mục) và danh sách này sẽ được làm mới sau mỗi 5 giây (đó là giám sát dự án liên quan).

Khi độ dài danh sách lớn hơn một chút, trang web trong khi hiển thị lại DOM có thể "chậm". Nó xuất hiện mà góc tái tạo toàn bộ DOM (nhưng 95% mục là như nhau!)

Một trong những cách tiếp cận có thể là đặt biểu thức "theo dõi" chẳng hạn như item.id. Nhưng ở đây có một vấn đề khác, tôi cũng muốn tái tạo các mục khi mô tả ví dụ đã được thay đổi bởi người dùng khác. Vì theo dõi bởi là biểu thức cho các thay đổi item.id trong item.description không cập nhật mục trong DOM.

Có cách nào để theo dõi qua nhiều thuộc tính? Có lẽ một số chức năng? Hoặc có thể so sánh bằng "tay"?

Bất kỳ ý tưởng, mẫu mã tôi sẽ đánh giá cao :)

CẬP NHẬT

những gì tôi phát hiện ra khi tôi đặt theo dõi bởi để item.id góc html không tái crete cho các hạng mục, chỉ cần cập nhật giá trị trong phần tử đã được tạo và có vẻ như là "nhanh hơn" rồi xóa và tạo. Trước đây tôi có một chút khác biệt.

FIX

Đối với những người đang tìm kiếm cho hiệu suất tốt hơn> 1k mục trong ng-lặp lại SỬ DỤNG theo dõi bởi item.id nó sẽ thúc đẩy hiệu suất của bạn;)

Answer 1

Dựa tôi kiến thức, mô hình angularjs được liên kết với giao diện ui, do đó mô hình sẽ lập lại thông qua $ apply hoặc $ digest khi giá trị thay đổi. vì vậy trong trường hợp của bạn, u wan liên kết giá trị mô hình với giao diện ui nhưng cũng không muốn hiển thị lại chế độ xem nếu giá trị không thay đổi, điều đó là không đúng. đây là những gì tôi biết. Tuy nhiên,

tuy nhiên, bạn chỉ có thể thao tác phần tử dom. ví dụ cửa hàng dữ liệu vào một biến

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

trong html, hướng dẫn sử append hoặc sử dụng chỉ thị để phụ thêm, sau đó gán id cho thành phần,

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

kiểm tra và so sánh giá trị, dựa ur nhu cầu. sau khi tìm thấy, sau đó là angular.element ("# yourid").()

điều này sẽ giải quyết tài nguyên trình duyệt của bạn tiêu thụ các vấn đề.

Answer 2

Như nhận xét gợi ý bạn có thể thử một cái gì đó như thế này:

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

Trong điều khiển của bạn:

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

Điều này có thể giúp đỡ với số phần tử DOM được tái hiển thị khi thay đổi danh sách .

Answer 3

Bạn không cần tạo hàm để xử lý theo dõi bởi nhiều thuộc tính. Bạn có thể làm:

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