没有包装器的嵌套 ngRepeat答案

【问题标题】：nested ngRepeat without a wrapper没有包装器的嵌套 ngRepeat
【发布时间】：2015-03-19 02:22:48
【问题描述】：

我有一个这样的 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的父母的子项。

如何使用角度 ngRepeat 指令来做到这一点？

更新我正在尝试使用引导程序“row”和“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>

【问题讨论】：

您发布的“对象”实际上是一个对象数组。对象和数组都可以 ng 重复，但语法不同。为避免嵌套对象，您可能需要使用嵌套的 ng-repeat-start 指令，例如这个问题：stackoverflow.com/questions/16900050/…。一旦我有时间做一个答案，我会发布一个答案。
这些<div> 元素总是被包裹在另一个元素中，即使那个元素是<body> 元素。也许您可以多解释一下为什么另一个“包装器”会成为问题？
@Claies。我已经更新了问题。
你可以编写过滤器来提取属性 - 所以你会以
@PetrAveryanov 我和你说的有点相似..

标签： javascript html angularjs

【解决方案1】：

如果你使用angular-filter 模块，你可以在不转换模型的情况下做到这一点：

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

说明：

item in arrayItems ：我们正在迭代 parent 项目数组
where: {selected: true} ：我们只保留标志 selected 等于 true 的那些
map: 'subitems' ：我们采摘属性subitems（子数组）
flatten : 我们将子数组扁平化为一个数组

见fiddle

【讨论】：

【解决方案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

希望对您有所帮助，谢谢。

【讨论】：

我没听懂你。在您的示例中是否可以一次只显示一个子列表？我应该看到选定父母的所有子项目。所以，如果我选择了第一个和第二个父项，我应该看到数字 1、2、3、4、5、6。如果我取消选择第二个并选择最后一个，那么我会看到 1、2、 3、10、11、12。
@Callebe 检查我的更新答案，这正是您想要的选择和取消选择功能，谢谢:)
非常感谢@pankajparkar
感谢您的投票。您对我的回答有何看法。是好是坏？
这是一个很好的答案。如果我能接受两个答案，我也会接受你的。它帮助我更多地了解过滤器。再次感谢您。

【解决方案3】：

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

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

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

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

【讨论】：

感谢您的回答。我试图避免这种方法。

【解决方案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 -->

【讨论】：