1

ソーシャル メディア統計のオブジェクトがあります。それらをテーブルに ng-repeat しようとしています。これが私のプランカーです。

HTML:

<table>
      <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData}}</td>
      </tr>
</table>

コントローラ オブジェクト:

 $scope.data = { buzz:0, 
                  Delicious:121,
                  Facebook: 
                  { 
                    like_count: "6266",
                    share_count: "20746"
                  },
                  GooglePlusOne:429,
                  LinkedIn:820,
                  Twitter:4074
                };

Facebook の結果を表示するときに問題が発生します。その中に<td>オブジェクト全体が表示されます（コードのセットアップ方法にあるはずです）。しかし、私が望んでいるのは、そのオブジェクトを繰り返し、セルにキーと値を表示することです。

がオブジェクトであるかどうかを確認metricDataし、その上で何らかの ng-repeat を実行してみました。しかし、私はそれで運がありませんでした。セル内に内部オブジェクト (キーと値) を表示する方法について何か考えはありますか?

4

3 に答える 3

6

metricData のタイプを返すスコープ関数を定義できます。

  $scope.typeOf = function(input) {
    return typeof input;
  }

次に、そのタイプに従って表示できます。

  <tr ng-repeat="(metric, metricData) in data">
    <td>{{metric}}</td>
    <td ng-switch on="typeOf(metricData)">
      <div ng-switch-when="object">
        <div ng-repeat="(key, value) in metricData">
          <span>{{key}}</span>
          <span>{{value}}</span>
        </div>
      </div> 
      <span ng-switch-default>{{metricData}}</span>  
    </td>
  </tr>

このプランカーでそれを見ることができます

于 2013-06-19T21:00:35.247 に答える
1

子を再帰的に接続する特定のディレクティブが必要なようです。次の例を見てください: Recursion in Angular ディレクティブ

チェックするのは、繰り返す必要があるのが値ではなくオブジェクトであるかどうかです。次に、新しい要素を追加してコンパイルし、プロセスを最初からやり直します。

于 2013-06-19T19:46:21.613 に答える
1

これらの値のそれぞれに独自の行を持たせたいと想定していますが、それがどのように機能するかを正確に説明していません。問題は、必要なもののクリーンバージョンを ng-repeat ディレクティブに渡すことで処理するのが最善だと思います。サンプルで facebook に 2 つの行が必要だと仮定しています。"Facebook_like_count" と "Facebook_share_count" (PLUNKER)のプロパティがあるように、メトリクスを平坦化するフィルターを作成できます。

app.filter('flatten', function() {
  function flattenTo(source, dest, predicate) {
    predicate = predicate || '';
    angular.forEach(source, function(value, key) {
      if (typeof(value) == 'object') {
        flattenTo(value, dest, predicate + key + '_');
      } else {
        dest[predicate + key] = value;
      }
    });
  }

  return function(input) {
    var obj = {};
    flattenTo(input, obj, '');
    return obj;
  }
});

次に、繰り返しでフィルターを使用できます。

<tr ng-repeat="(metric, metricData) in data|flatten">
于 2013-06-19T22:26:24.953 に答える