[英]nested ngRepeat without a wrapper
我有一个这样的JS对象:
[
{
selected: true,
itens: [1, 2, 3]
},
{
selected: true,
itens: [4, 5, 6]
},
{
selected: true,
itens: [7, 8, 9]
},
{
selected: true,
itens: [10, 11, 12]
}
]
它是具有子列表的对象的列表。 (这只是我实际结构的简化形式)
我想打印许多div,每个子列表项一个。 就像这样:
<div>1</div>
<div>2</div>
<div>3</div>
<div>...</div>
<div>11</div>
<div>12</div>
但我不想将父项包装在外部div或其他元素中。 我还想隐藏具有“ selected”属性为false的父母的子项。
如何使用angular ngRepeat指令执行此操作?
更新我正在尝试列出具有引导程序“行”和“ col”类的元素。 每列是4个引导程序列宽。
如果在一行中放置超过12列,则每组额外的列将作为一个单元包装到新行上。
这是来自boostrap文档。
结果应该是这样的
<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>
如果您使用角度滤波器模块,则无需进行模型转换即可:
<div ng-repeat="item in arrayItems | where: {selected: true} | map: 'subitems' | flatten">
{{item}
</div>
说明:
item in arrayItems
:我们正在迭代item in arrayItems
的父数组 where: {selected: true}
:我们仅保留selected
了flag等于true的那些标记 map: 'subitems'
:我们选择了属性subitems
(子数组) flatten
:我们将子阵列展平为一个阵列 见小提琴
可以使用ng-repeat本身,只需要维护一个变量控制器即可。
的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>
在这里工作的Plunkr
更新:
我们需要制作一个过滤器来管理和创建itens
数组的选定值
过滤
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;
}
});
标记
<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>
希望这可以对您有所帮助,谢谢。
ng-repeat
不会开箱即用。 您需要将所有项目数组组合成一个可以迭代的数组:
var arr = [];
test.forEach(function (obj) {
arr = arr.concat(obj.itens);
});
然后,您可以在ng-repeat中使用master数组:
<div ng-repeat="val in arr">{{val}}
这是一个有效的小提琴: http : //jsfiddle.net/tsclaus/m3vh0yyc/1/
结果恰好12个div是控制器元素的唯一子元素。
<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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.