2

Smart Table (最新バージョン) と AngularJs (v. 1.2.16) を使用して、ヘッダー用とテーブル コンテンツ用の 2 つのオブジェクトを使用してテーブルを作成しています。私の問題は、テーブル本体のセルを作成するときに発生します。次のコードを使用すると正常に動作します。

<tr ng-repeat="row in rowCollection">
    <td>{{row.productNumber}}</td>
    <td>{{row.BuyIt}}</td>
    <td>{{row.brand}}</td>
</tr>

しかし、私はこのように体を生成する必要があります:

<tr ng-repeat="row in rowCollection">
    <td ng-repeat="col in columns">{{value-to-show}}</td>
</tr>

私の目的はこれです：

$scope.rowCollection = [{
    "productNumber": 5877,
    "BuyIt": "Online",
    "brand": "BrandA"
}, {
    "productNumber": 5743,
    "BuyIt": "Online",
    "brand": "BrandB"
}];

$scope.columns = [{
    'colName': 'Product Number',
    'Id': 'column1',
    'className': '',
    'skipNatural': true,
    'sortDefault': 'reverse'
}, {
    'colName': 'Store or Online',
    'Id': 'column2',
    'className': '',
    'skipNatural': true
}, {
    'colName': 'Brand',
    'Id': 'column3',
    'className': '',
    'skipNatural': true
}];

正しい値を正しいセルに表示するにはどうすればよいですか?

問題を示す jsfiddle があります: h ttp://plnkr.co/edit/aEfzzU?p=preview

どんな助けでも本当に感謝しています。

4

2 に答える 2

0

次のように、対応するプロパティで列オブジェクトを拡張することもできます。

<tr ng-repeat="row in rowCollection">
  <td ng-repeat="col in columns">{{row[col.property]}}</td>
</tr>

これには、次のような素晴らしい副作用もあります。

  • ヘッダーで col.property の st-sort ディレクティブを使用して、並べ替えを有効にすることができます
  • 表示する列を動的に変更する
  • ヘッダーと本文の両方の構成として列オブジェクトを使用します
  • 表示するよりも多くのプロパティを含む複雑なオブジェクトで使用してください!
于 2015-09-18T10:51:40.993 に答える