Double ng-repeat to flatten out nested object

Question

I have a use in case which I had solved up 'til now with ng-repeat-start. It currently looks like this:

Controller

$scope.providers = [ 'Site Hosting', 'Best Hosting', 'Fantastic Hosting' ]; $scope.providerColumns = { price: { text: 'Price', exposed: true }, site: { text: 'Website', exposed: true }, phone: { text: 'Phone Number', exposed: false } };

Template

<div class='table-header-row'> <div class='first-header-cell' ng-repeat='obj in firstCellsHeaders'> {{obj.text}} </div> <div class='middle-header-cell' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'> {{prov}} {{providerColumns.price.text}} </div> <div class='middle-header-cell' ng-if='providerColumns.site.exposed'> {{prov}} {{providerColumns.site.text}} </div> <div class='middle-header-cell' ng-repeat-end ng-if='providerColumns.phone.exposed'> {{prov}} {{providerColumns.phone.text}} </div> <div class='last-header-cell' ng-repeat='obj in lastCellsHeaders'> {{obj.text}} </div> </div> <div class='table-row'> <div class='first-cells' ng-repeat='obj in firstCells'> {{obj.text}} </div> <div class='middle-cells' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'> {{data[prov].price}} </div> <div class='middle-cells' ng-if='providerColumns.site.exposed'> {{data[prov].site}} </div> <div class='middle-cells' ng-repeat-end ng-if='providerColumns.phone.exposed'> {{data[prov].phone}} </div> <div class='last-cells' ng-repeat='obj in lastCells'> {{obj.texLine2}} </div> </div>

It's essentially a table built out of div's in order to facilitate reordering the columns after angular finishes rendering.

Now I've realized the object represented in ng-repeat-start is more dynamic than I previously thought, and I want to be able to have a squared ng-repeat, i.e. nested repeat without nested elements, much like the oft-applied solution of using ng-repeat on a tbody element, and then an additional ng-repeat on the tr elements within it, which essentially is a flattened nesting effect. I need a solution for horizontal elements, preferably divs. I can't have them tied together in any way, however, so no nesting of divs or anything like that. Ideally it would look something like this:

<div ng-repeat='prov in providers' ng-repeat='col in providerColumns' ng-if='col.exposed'> {{data[prov][col]}} </div>

Any ideas?

Could you post your JS code or the object that is being iterated? — Shota
– Shota, Commented Apr 12, 2016 at 8:56

Cosmin Ababei · Accepted Answer · 2016-04-12 08:53:48Z

1

+50

Instead going with:

<div ng-repeat='obj1 in parent' ng-repeat='obj2 in obj1'> {{content[obj1][obj2]}} </div>

Why not use a nested ngRepeat, like this:

<div ng-repeat='obj1 in parent'> <div ng-repeat='obj2 in obj1'> {{content[obj1][obj2]}} </div> </div>

answered Apr 12, 2016 at 8:53

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ygesher Over a year ago

Nesting won't work for my use case, because I need to move the div's around afterwards with absolute positioning, and it'll muck everything up.

Cosmin Ababei Over a year ago

I think it's much easier to change the CSS code to accommodate this solution, rather than building your own ngRepeat which works with the current CSS code.

ygesher Over a year ago

I mean that I do some serious manipulations on all the divs after rendering (with jQuery), and if they're nested it will create unwanted complications. I considered this option, but I see it as a last resort. In any case, it's certainly doesn't address the question.

ygesher Over a year ago

Now I have a dilemma. I decided in the end to try your suggestion, although I would note that I had thought of it early and dismissed it as being too messy. You made me reconsider it, and it worked fine, without having to further play with the CSS. Now on the one hand I used your solution, but on the other hand, it doesn't really address the original question, which stipulated specifically not to use a nested ng-repeat. What do you think? I feel like I wanted to award the bounty to someone who could show me a new angular feature that I didn't know about.

Cosmin Ababei Over a year ago

My answer was meant to incite to a conversation as you've never specified why you can't use nested ngRepeats. This, for me personally, seems like an ideal solution as you can achieve what are you looking for with minimal effort. AFAIK, there isn't an Angular feature for this - you'll have to write your own directive which uses a nested loop to iterate over two collections and manipulates the DOM, much like ngRepeat does.

Collectives™ on Stack Overflow

Double ng-repeat to flatten out nested object

1 Answer 1

5 Comments

Hot Network Questions