Question

我使用Smart Table（最新版本）和AngularJs（v.1.2.16）使用两个对象构建一个表，一个用于标题，另一个用于表内容。我的问题发生在创建表体细胞时。使用以下代码可以正常工作：

<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

非常感谢任何帮助。

Answer 1

您可以将ng-repeat更改为：

  <tbody>
    <tr ng-repeat="row in rowCollection">
      <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
  </tbody>

Answer 2

您也可以扩展与其对应的属性的列对象，如下所示：

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

这也有很好的副作用：

您可以在标题中使用col.property上的st-sort指令启用排序
动态更改要显示的列
使用列对象作为标题和正文的配置
用于包含比您要显示的属性更多的复杂对象！

使用ng-repeat生成表体行

2 个答案: