14

製品に対応するキーとオブジェクトに対応する値を持つオブジェクトがあるとします。これらのオブジェクトは、それらの製品が販売された価格に対応するキーと、販売量に対応する値を持ちます。

たとえば、$1 で 10 個のウィジェットを販売し、$2 で 5 個のウィジェットを販売した場合、データ構造は次のようになります。

{ 'widget': {'1': 10, '2': 5} }

この構造をループして、次のようなテーブルに行を生成したいと思います。

thing   price  amount
---------------------
widget  $1     10
widget  $2     5

Python では、リストの内包表記をネストして、このようにリストのデータ構造をトラバースすることができます。ng-repeat を使用すると、そのようなことが可能でしょうか?

4

4 に答える 4

18

これはどう？

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( 、 、およびを使用)、スタイルを設定できます(または、 -- などのネイティブ CSS セレクターng-repeatを使用することをお勧めします) 。$first$middle$lastng-class:last-childng-class

于 2013-08-24T01:47:43.593 に答える
13

ng-repeat には現在、オブジェクト内で複雑な反復処理を行う方法がありません (Python で可能な方法)。ng-repeat のソース コードを調べて、一致する正規表現が次のとおりであることに注意してください。

(key, value) in collection-そして、それらはキー配列にプッシュされ、値リストに割り当てられるため、悲しいことに複雑な ng-repeat を持つことはできません...

基本的に、ここで既に回答されている 2 種類のソリューションがあります。

  1. 最初の回答が示唆したように、ネストされた ng-repeat 。
  2. 2番目の回答が示唆するように、データオブジェクトを1 ng-repeatに合わせて再構築します。

ソートとコーディングのロジックをコントローラー内に保持し、HTML ドキュメントで処理しないようにするため、解決策 2 の方が優れていると思います。これにより、より複雑な並べ替え (つまり、価格、金額、widgetName、またはその他のロジックに基づく) も可能になります。

もう1つのこと-2番目のソリューションは、データセットの可能なメソッドを反復処理します( hasOwnPropertyがそこで使用されなかったため)。

angular.forEach を使用し、ソリューションがかなり単純であるが複雑なソート ロジックを可能にすることを示すために、このPlunker (finishmove 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>
于 2013-08-24T13:12:33.067 に答える