2

我正在使用 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

非常感谢任何帮助。

4

2 回答 2

1

您可以将您的 ng-repeat 更改为：

  <tbody>
    <tr ng-repeat="row in rowCollection">
      <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
  </tbody>
于 2015-08-27T21:39:26.383 回答
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 回答