假設我有一個對象，其中包含對應於對象的產品和值的對象，這些對象又具有與這些產品已售出的價格點相對應的鍵以及與銷售量相對應的值。ng-在嵌套對象上重複單個元素
例如，如果我賣爲$ 110級的部件和爲$ 2 5個窗口小部件，我必須的數據結構：
{ 'widget': {'1': 10, '2': 5} }
我想環在該結構上，併產生表中的行例如這個：
thing price amount
---------------------
widget $1 10
widget $2 5
在Python中，可以嵌套列表推導來遍歷列表數據結構。使用ng-repeat會有這種可能嗎？
ng-repeat目前沒有一種可能的方式來對內部對象進行復雜的迭代（在python中可能的方式）。退房的NG-重複source code並注意匹配的正則表達式的表達式爲：
(key, value) in collection - 和他們推入鍵陣列，並分配給值列表，所以你不可能有一個複雜的NG-重複可悲的是...
基本上有2種類型本來就已經在這裏找到答案的解決方案：
我認爲解決方案2更好，因爲我喜歡在控制器內保持排序&編碼邏輯，而不是在HTML文檔中處理它。這也將允許更復雜的排序（即基於價格，數量，widgetName或其他邏輯）。
另一件事 - 第二個解決方案將迭代數據集的可能方法（因爲hasOwnProperty沒有在那裏使用）。
我爲了使用angular.forEach，並表明所述溶液是相當簡單的，但是允許複雜的排序邏輯改進在此Plunker（基於finishingmove Plunker）溶液中。
$scope.buildData = function() {
var returnArr = [];
angular.forEach($scope.data, function(productData, widget) {
angular.forEach(productData, function(amount, price) {
returnArr.push({widgetName: widget, price:price, amount:amount});
});
});
//apply sorting logic here
return returnArr;
};
$scope.sortedData = $scope.buildData();
，然後在你的控制器：
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<td>thing</td>
<td>price</td>
<td>amount</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sortedData">
<td>{{ item.widgetName }}</td>
<td>{{ item.price|currency }}</td>
<td>{{ item.amount }} </td>
</tr>
</tbody>
</table>
</div>
只需將您的對象轉換爲數組...在JS中非常簡單。 喜歡的東西：
$scope.data = { 'widget': { '1': 10, '2': 5 } };
var tableData = [];
for (item in $scope.data) {
var thing = item;
for (subitem in $scope.data[thing]) {
tableData.push({
thing: thing,
price: subitem,
amount: $scope.data[thing][subitem]
});
}
}
我創建了一個用的jsfiddle這個例子：http://jsfiddle.net/b7TYf/
這肯定是一個選項「怎麼做的SelectMany」的程序員，但我寧願不重新僅爲了顯示它而構建數據結構。不過，如果沒有人提出更好的答案，我會接受你的答案。 –
這個怎麼樣？
http://plnkr.co/edit/ZFgu8Q?p=preview
控制器：
$scope.data = {
'widget1': {
'1': 10,
'2': 5
},
'widget2': {
'4': 7,
'6': 6
}
};
檢視：
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<td>thing</td>
<td>price</td>
<td>amount</td>
</tr>
</thead>
<tbody ng-repeat="(productName, productData) in data">
<tr ng-repeat="(price, count) in productData">
<td>{{productName}}</td>
<td>{{price|currency}}</td>
<td>{{count}}</td>
</tr>
</tbody>
</table>
</div>
輸出：
thing price amount
----------------------
widget1 $1.00 10
widget1 $2.00 5
widget2 $4.00 7
widget2 $6.00 6
這將輸出一個tbody每產物（噸對於Sebastien C來說，這是個好主意）。 如果需要，可以在第一，中間和最後tbody區分（使用ng-repeat的$first，$middle和$last），並與ng-class他們的風格（甚至本地CSS選擇器如:last-child - 我會建議ng-class雖然）
我會使用多個tbody而不是多個表 –
@SebastienC。很好的想法，我剛纔更新了那個笨蛋。 – finishingmove
這絕對是我正在尋找的東西，但我害怕使用單獨的表/實體並不是真正的選擇。如果在一個元素上重複一個屬性是很有可能的，那將是理想的。 –
我用一個簡單的指令，它有一個遞歸函數來遍歷我嵌套的對象，並創建嵌套元素。這樣你可以保持你的嵌套對象結構。
代碼：
angular.module('nerd').directive('nestedItems', ['$rootScope', '$compile', function($rootScope, $compile) {
return {
restrict: 'E',
scope: false,
link: function(scope, element, attrs, fn) {
scope.addElement = function(elem, objAr) {
var ulElement = angular.element("<ul></ul>");
if (objAr == undefined || objAr.length == 0) {
return [];
}
objAr.forEach(function(arrayItem) {
var newElement = angular.element("<li>"+arrayItem.val+"</li>");
ulElement.append(newElement);
scope.addElement(newElement,arrayItem.sub);
});
elem.append(ulElement);
};
scope.addElement(element,scope.elements);
}
};
}]);我的對象：
$scope.elements = [
{
id: 1,
val: "First Level",
sub: [
{
id: 2,
val: "Second Level - Item 1"
},
{
id: 3,
val: "Second Level - Item 2",
sub: [{
id: 4,
val: "Third Level - Item 1"
}]
}
]
}
];我的HTML
<nested-items></nested-items>
只是爲了搜索引擎，我將增加從C＃的背景下，angularjs」 – dovid