nested ngRepeat without a wrapper

Question

I have a JS object like this:

[
{
    selected: true,
    itens: [1, 2, 3]
},
{
    selected: true,
    itens: [4, 5, 6]
},
{
    selected: true,
    itens: [7, 8, 9]
},
{
    selected: true,
    itens: [10, 11, 12]
}
]

It is a list of objects that have sublists. (this is just a simplified form of my real structure)

I would like to print many divs, one for each sublist item. It would be like this:

<div>1</div>
<div>2</div>
<div>3</div>
<div>...</div>
<div>11</div>
<div>12</div>

But i do not want wrap the parent items in a external div or another element. And i also would like to hide the subitems of parents with 'selected' attribute false.

How can i do this with angular ngRepeat directive?

UPDATE I'm trying to list the elements with bootstrap 'row' and 'col' classes. each column is 4 bootstrap columns wide.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

this is from boostrap documentation.

The resoult should be like this

<div class="row">
    <div col-md-4>1</div>
    <div col-md-4>2</div>
    <div col-md-4>3</div>
    <div col-md-4>...</div>
    <div col-md-4>11</div>
    <div col-md-4>12</div>
</div>

The "object" you posted is actually an array of objects. Both objects and arrays can be ng-repeated over, but with different syntax. To avoid nested objects, you'll probably want to use nested ng-repeat-start directives, like in this question: http://stackoverflow.com/questions/16900050/angular-js-ng-repeat-across-multiple-elements. I'll post an answer once I have time to make one. — Tahsis Claus, Mar 18 '15 at 17:40
these `
` elements will ALWAYS be wrapped in another element, even if that element is the `` element. Perhaps you can explain a bit more about why another "wrapper" would be a problem? — Claies, Mar 18 '15 at 17:53
you can write filter for extracting properties - so you will end with something like — Petr Averyanov, Mar 18 '15 at 18:07

score 3 · Accepted Answer · answered Mar 18 '15 at 18:14

If you use angular-filter module, you can do that without transforming the model :

<div ng-repeat="item in arrayItems | where: {selected: true} | map: 'subitems' | flatten">
    {{item}        
</div>

Explanation :

item in arrayItems : We are iterating over the parent array of items
where: {selected: true} : We keep only those with flag selected equals to true
map: 'subitems' : We pluck the property subitems (the sub-arrays)
flatten : We flatten the sub-arrays into one array

See fiddle

Pankaj Parkar · Answer 2 · 2015-03-18T18:22:48.597

1

It can be possible using ng-repeat itself, only you need to maintain one variable controller.

HTML

<body ng-controller="DemoCtrl" ng-init="selectedIndex=0">
   <div ng-repeat="item in items" ng-click="item.selected = !item.selected; $parent.selectedIndex=$index">Item {{$index}}</div>
   <div ng-repeat="item in items[selectedIndex].itens" ng-bind="item"></div>
</body>

Working Plunkr Here

Update:

We need to make one filter that will manage & create selected values itens array

Filter

app.filter('showselected',function($filter){
  return function(values){

    var selectedValues = $filter('filter')(values, {selected: true}), returnValue = [];
    console.log(selectedValues)
    angular.forEach(selectedValues, function(val, index){
      angular.forEach(val.itens, function(v, i){
        returnValue.push(v);
      });
    });
    return returnValue;
  }
});

Markup

<div ng-repeat="item in items" ng-click="item.selected = !item.selected; $parent.selectedIndex=$index" ng-class="{green: item.selected}">Item {{$index}}</div>
<div ng-repeat="item in items| showselected track by $index" ng-bind="item"></div>

Updated Plunkr

Hope this could help you, Thanks.

edited Mar 18 '15 at 18:22

answered Mar 18 '15 at 17:44

Pankaj Parkar

134,766
23
234
299

I didn't get you. In your example is it possible to show just one sublist at a time? I should see all subitems of selected parents. So, if i have the first and second parent items selected, i should see the numbers 1, 2, 3, 4, 5, 6. If i deselect the second one and select the last one, then i would see 1, 2, 3, 10, 11, 12. – Callebe Mar 18 '15 at 17:50
@Callebe check my updated answer, which is like exactly what you want with select & deselect functionality, Thanks :) – Pankaj Parkar Mar 18 '15 at 18:24
Thanks for voteup..what do you think about my answer. Is it good way or bad? – Pankaj Parkar Mar 18 '15 at 18:37
It is a pretty good answer. If i could accept tow answers, i would accept yours too. It help me to understand more about filters. Thank you so much again. – Callebe Mar 18 '15 at 18:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73275/discussion-between-pankajparkar-and-callebe). – Pankaj Parkar Mar 18 '15 at 18:45

score 0 · Answer 3 · answered Mar 18 '15 at 17:36

0

ng-repeat doesn't do this sort of thing out of the box. You'll need to combine all your items arrays into one array that you can iterate over:

var arr = [];
test.forEach(function (obj) {
    arr = arr.concat(obj.itens);
});

Then, you can use the master array in ng-repeat:

<div ng-repeat="val in arr">{{val}}

answered Mar 18 '15 at 17:36

sma

9,449
8
51
80

Thank you for the answer. I was trying avoid this approach. – Callebe Mar 18 '15 at 17:38

score 0 · Answer 4 · answered Mar 18 '15 at 18:22

Here is a working fiddle: http://jsfiddle.net/tsclaus/m3vh0yyc/1/

Results in exactly 12 divs being the only children of the controller element.

<div ng-controller="MyCtrl" class="ng-scope">
<!-- ngRepeat: object in array --><!-- ngIf: false -->
<!-- ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    1
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    2
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    3
</div><!-- end ngRepeat: number in object.itens --><!-- end ngRepeat: object in array --><!-- ngIf: false -->
<!-- ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    4
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    5
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    6
</div><!-- end ngRepeat: number in object.itens --><!-- end ngRepeat: object in array --><!-- ngIf: false -->
<!-- ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    7
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    8
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    9
</div><!-- end ngRepeat: number in object.itens --><!-- end ngRepeat: object in array --><!-- ngIf: false -->
<!-- ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    10
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    11
</div><!-- end ngRepeat: number in object.itens --><div ng-repeat="number in object.itens" ng-repeat-end="" class="ng-binding ng-scope">
    12
</div><!-- end ngRepeat: number in object.itens --><!-- end ngRepeat: object in array -->

nested ngRepeat without a wrapper

4 Answers4