I need to output two lists with data from the same ng-repeat in different parts of the page. For example:
// list # 1
<ul ng-repeat="item in items track by item.id">
<li ng-bind="item.name"></li>
</ul>
// list # 2
<ul ng-repeat="item in items track by item.id">
<li ng-bind="item.color"></li>
</ul>
Instead of using multiple instances of the same ng-repeat, is there a way to use data from the first ng-repeat instance in list # 2?
What's the reason for wanting to do it? I doubt there would be any noticable performance increase so I don't see an issue with using the ng-repeat again (and again, and again) for the same data.
Unless you have some other reason for not wanting to do it that way, I would say that's fine.
I can't think of a way to optimize in the way that you describe above. However, if your lists are going to be long you can run into performance issues. The ng-repeats each set up an implicit watcher because of the two way data binding. You can run into performance issues when your page has a large amount of data and lots of watchers. If your list data doesn't need to be dynamic - ie, change with a selection or something - I'd recommend using one time bindings. They're available out of the box with Angular 1.3 and there's a third party package that accomplishes the same thing in Angular 1.2. If you're concerned about performance with your ng-repeats (which sounds like what you're really getting at in your question) it's worth implementing one time bindings.
Computationally speaking, making two loops with one operation each or one loop with two operations is the same thing (if not for some overhead).
Probably you could do a loop that prints all the <li> elements and then moves some to another <ul> but that would probably be more complex actually (and probably would require to be implemented not in "the angular way").
I doubt there is a more optimized way and if there was it won't be by much
