Question

我有一个像这样的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或其他元素中。而且我也想隐藏父母的子项目，并选择＆＃39;属性错误。

如何使用角度ngRepeat指令执行此操作？

更新我试图用bootstrap＆＃39; row＆＃39;来列出元素。和＆＃39; col＆＃39;类。每列是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>

Answer 1

如果您使用angular-filter模块，则可以在不转换模型的情况下执行此操作：

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

说明：

item in arrayItems：我们正在迭代父项目数组
where: {selected: true}：我们只保留旗帜selected等于真的
map: 'subitems'：我们采用属性subitems（子阵列）
flatten：我们将子阵列展平为一个数组

请参阅fiddle

Answer 2

可以使用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>

Working 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>

Updated Plunkr

希望这可以帮助你，谢谢。

Answer 3

ng-repeat不会开箱即用。您需要将所有项目数组合并到一个可以迭代的数组中：

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

然后，您可以在ng-repeat中使用主数组：

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

Answer 4

这是一个工作小提琴：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 -->

嵌套ng在没有包装器的情况下重复

4 个答案: