Best way to use ng-repeat in Angularjs for specific field

Question

I am new to Angularjs and my app(built with Angular & Rails) is taking too much time to load the images/data. So I plan to optimize the code. Here is very quick and short question. What is the best way to use ng-repeat ? I planned to use track by in ng-repeat.

In my $scope.attributes I am getting thousands of data from server. In each there are many fields. But I wanted to use single field from those. SO I tried something like this:

<div ng-repeat="attribute in attributes track by attribute.name" >
<li> {{attribute.name}} </li>
</div>

Is this correct way? I have seen many examples everywhere use track by task.id So Can I use any specific field name instead of id ? Can I use filter also? what is the meaning of $$hashkey approach? I wanted to load images and it takes more time. Please want Experts advice.

making and sharing sample plunker or fiddle will be plus to help you in better way. — roxid, Apr 09 '15 at 12:48
I agree with you but I am getting data from server. I just wanted some advice which is the best way to use this. — Hetal Khunti, Apr 09 '15 at 12:50
What would you expect with thousands of images. Sounds like issue is more related to too much data displayed at one time, not how ng-repeat works — charlietfl, Apr 09 '15 at 12:52
what about lazy loading with infinite scroll?? look here http://ng-lazy.com/ — roxid, Apr 09 '15 at 12:52
@charlietfl : Yeah getting more data and from those data have to show images. I used `ng-lazy-image` as directive but still images are taking time to load. So I think I can reduce little time by experiment on ng-repeat — Hetal Khunti, Apr 09 '15 at 12:57
http://stackoverflow.com/questions/18204473/progressive-loading-in-ng-repeat-for-images-angular-js — roxid, Apr 09 '15 at 12:58
Many Images are loaded on the screen background and as per the div clicked background should be changed. Not by scrolling down — Hetal Khunti, Apr 09 '15 at 13:01
People can't consume thousands of rows at a time. Create some filtering tools to cut down the amount of display — charlietfl, Apr 09 '15 at 13:06
@charlietfl : So Can I use filter to filter the name field only?? — Hetal Khunti, Apr 09 '15 at 13:10

Steve Drake · Accepted Answer · 2015-04-09T13:01:33.427

1

if you track by .name it will use .name as the identifier, eg if the list changes it will find the ROW by .name

If the list will not change, look at one way binding

<div ng-repeat="attribute in ::attributes track by $index" >
<li> {{attribute.name}} </li>
</div>

-- I am sure that this will give you a DIV around the LI

Not related to your Q, but having just done some AngularJS performance tuning. Consider using ng-if instead of ng-show / ng-hide , ng-show/hide will still produce the DOM , ng-if will not. (You may have done this already)

edited Apr 09 '15 at 13:01

answered Apr 09 '15 at 12:57

Steve Drake

1,968
2
19
41

so $index will sort by id? and What is the purpose of using `::` – Hetal Khunti Apr 09 '15 at 13:00
:: is for one-way binding which means no watchers once things settle. – Steve Drake Apr 09 '15 at 13:03
no, it wont sort by id. For our APP we sorted on the server as it made sense for our usage. – Steve Drake Apr 09 '15 at 13:05
Thank you Steve. So I should change `attribute.name` to `$index` – Hetal Khunti Apr 09 '15 at 13:06
once you have read your DATA do something like $timeout(function () { console.log("Binding Done"); }); that will let you know when the binding is completed, if it takes sometime then you have a client performance issue. I would use $index – Steve Drake Apr 09 '15 at 13:07

Best way to use ng-repeat in Angularjs for specific field

1 Answers1