Angular智能表无法根据对象列表呈现集合

Question

我使用underscorejs将Items Array转换为索引对象：

  $scope.items = _.indexBy($scope.items, 'id');

现在我的物品看起来像这样：

  $scope.items = {
    "1": {
        id: 1,
      name: "Tizio"
    },
    "2": {
        id: 2,
      name: "Caio"
    },
    "3": {
        id: 3,
      name: "Sempronio"
    },
  };

这正是我所需要的。

现在，我需要在表格中显示项目，并且我想使用一个插件来帮助我轻松地对数据进行排序，分页和过滤，因此我开始使用angular-smart-table 。 著名和普通的...

我遵循了文档，最终的HTML如下所示：

<table st-safe-src="items" st-table="rowItems">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <tr ng:repeat="item in rowItems track by item.id">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
  </tr>
</table>

不幸的是，它没有显示我的数据。 我试图删除智能表，但在普通表中工作正常。

我该如何运作？ 我做错了什么？ 如果智能表不支持对象列表，您知道一个更好的插件应该更适合我的需求吗？

这里是关于它的JsFiddle 。

谢谢

Answer 1

我不确定您要使用[].concat(OBJECT)做什么，所以我更改了使用Object.keys和map从Object转换为array的方式。

您可以检查更新的jsfiddle： https ://jsfiddle.net/qfpyu1kL/2/

  // Initial values converted to array
  $scope.rowItems = Object.keys($scope.items).map(function(key) {
    return $scope.items[key];
  });

  $timeout(function () {
    // Add new values
    $scope.rowItems.push({ id: 4, name: 'OTHER1' });
    $scope.rowItems.push({ id: 5, name: 'OTHER2' });
  }, 1000);

我已经看到您使用的是stSafeSrc，这意味着您期望使用异步数据，这就是我添加$ timeout的原因。

我也更新了HTML设置rowItems在st-safe-src属性和st-table来displayedCollection 。