オブジェクトに対応する製品と値に対応するキーを持つオブジェクトがあります。これらのオブジェクトは、その製品が販売された価格ポイントに対応するキーと、この構造上のループにネストされたオブジェクトに対して1つの要素をng-repeatする
{ 'widget': {'1': 10, '2': 5} }
私はたいとテーブル内の行を生成します。私は$ 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種類が基本的にあります。
私は、コントローラ内での並べ替えのロジックをコントローラの内部に保ち、HTMLドキュメントでそれを処理しないように、ソリューション2が優れていると思います。これにより、より複雑なソート（つまり、価格、金額、widgetNameまたは他のロジックに基づく）も可能になります。
もう1つの方法 - 2番目の解決策は、データセットの可能なメソッドを繰り返します（hasOwnPropertyはそこでは使用されていません）。
私はangular.forEachを使用するために、溶液はかなり単純ですが、複雑なソート・ロジックを可能にすることを示すために（finishingmoveのPlunkerに基づいて）この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ではかなり簡単です。私はこの例でjsfiddleを作成しました
$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]
});
}
}
：よう 何かこれはどうhttp://jsfiddle.net/b7TYf/
「angularjsに「どのように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にハンクス）。 必要な場合は、あなたが（ng-repeatの$first、$middleと$lastを使用して）tbody、最初の中間と最後の区別とng-classでそれらのスタイルを設定することができます（または、:last-childなども、ネイティブCSSセレクタ - でも、私はng-classをお勧めします）
複数のテーブルの代わりに複数のtbodyを使用します。 –
@SebastienCニースのアイデアは、私はちょうど今プランナーを更新しました。 – finishingmove
それは間違いなく私が探しているもののようなものですが、別のテーブル/ tbodiesを使用することは本当にオプションではないことを恐れています。要素の属性を魔法のように繰り返すことができれば理想的です。 –
私は、ネストされたオブジェクトをループに再帰関数を持ち、ネストされた要素を作成し、簡単なディレクティブを使用していました。この方法で、ネストされたオブジェクト構造を保持することができます。
コード：
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＃の背景、それは確かにオプションです – dovid