智能表格中的“st-sort”无法工作

Question

我正在使用 Angular v1.3.15。我通过调用 API 并将数据通过 $scope 传递到 smart 表格中来获取数据，如下所示。

以下是“$scope.rowCollection”在控制台上显示的数据格式。

数据可以正确地填充，但是当我尝试单击表头并使用 st-sort 方法对其进行排序时，表格值会变为空，明显未对列进行排序。以下是我的 HTML 代码片段的视图。

请告诉我我到底做错了什么。一旦我使用自己的数据集（而不是硬编码），整个表格的值就变得混乱无序。我有一种感觉，这与我在 Angular 端使用的变量名称有关。任何帮助都将不胜感激……谢谢。

- Nikhil Nanjappa

Answer 1

根据你的评论Nikhil。使用st-safe-src，就像这样：

HTML

<table st-table="displayedCollection" st-safe-src="rowCollection">
      <thead>
        <tr>
          <th st-sort="firstName">First Name</th>
          <th st-sort="lastName">Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in displayedCollection">
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
        </tr>
      </tbody>
</table>

JS

->

JavaScript

app.controller('Ctrl', function($scope, service) {
    $scope.displayedCollection = [];

    service.all.then(function(list) {
        $scope.rowCollection = list;
        $scope.displayedCollection = list;
    });
});

就这样了。

- Luis Crespo

---

这个答案对我很有帮助。谢谢！ - user5039044

另一个常见的未排序原因在这里描述，这个链接解决了我的无法排序的问题: http://stackoverflow.com/a/28773921/2580805 - DerWOK

Answer 2

如果您正在异步地导入数据（来自远程数据库、restful端点、ajax调用等），您必须使用stSafeSrc属性。您必须为基本集合和安全集合使用单独的集合，否则可能会导致无限循环。

由于我要从restful服务获取数据，所以使用st-table="displayedCollection" st-safe-src="rowCollection"解决了我的问题。

- Nayyar Abbas

---

很高兴能有一些解释，因为顶部答案缺乏任何解释！ - Noumenon

Answer 3

我认为它试图按照你编写的方式对行名称进行排序。尝试以下内容，看看是否有效：

     st-sort="employee.name"

- Kay Tsar

---

嘿，Kay.. 谢谢你的建议。我也尝试了，但好像没有起作用。显然，由于我的数据是异步加载的，根据smart-table文档 这里，我应该使用st-safe-src属性。 - Nikhil Nanjappa