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>
4 answers
solution1
2 ACCPTED 2015-03-18 18:14:51
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 flagselectedequals to true -
map: 'subitems': We pluck the propertysubitems(the sub-arrays) -
flatten: We flatten the sub-arrays into one array
See fiddle
solution2
1 2015-03-18 17:44:56
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>
Hope this could help you, Thanks.
solution3
0 2015-03-18 17:36:15
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}}
solution4
0 2015-03-18 18:22:09
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 -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.