沒有包裝的嵌套ngRepeat
[英]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>
4 個解決方案
解決方案1
2 已采納 2015-03-18 18:14:51
如果您使用角度濾波器模塊，則無需進行模型轉換即可：
<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：我們將子陣列展平為一個陣列
見小提琴
解決方案2
1 2015-03-18 17:44:56
可以使用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>
希望這可以對您有所幫助，謝謝。
解決方案3
0 2015-03-18 17:36:15
ng-repeat不會開箱即用。 您需要將所有項目數組組合成一個可以迭代的數組：
var arr = [];
test.forEach(function (obj) {
arr = arr.concat(obj.itens);
});
然后，您可以在ng-repeat中使用master數組：
<div ng-repeat="val in arr">{{val}}
解決方案4
0 2015-03-18 18:22:09
這是一個有效的小提琴： 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 -->
ngClick不會在填充了$ http.post（）數據的嵌套ngRepeat中觸發
[英]ngClick not firing in nested ngRepeat filled with data from $http.post()
AngularJS-嵌套子ngrepeat為空時如何顯示消息。
[英]AngularJS - How to display message when nested child ngrepeat is empty.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.