AngularJS 智能表文档/演示有问题吗？答案

【问题标题】：Is the AngularJS smart-table documentation/demo buggy?AngularJS 智能表文档/演示有问题吗？
【发布时间】：2017-02-06 16:41:55
【问题描述】：

我只是不明白这一点。在the smart-table web page 上，它讨论了stSafeSrc 属性，我看不到$scope. displayedCollection 的声明位置。

文字上写着smart-table first creates a safe copy of your displayed collection，而我

我曾假设一个 smart-table 指令正在声明它，但示例代码对我不起作用 - 表格行是空的 - 这就是我认为的问题。

例如，如果我们查看接受的this question 的答案，我们会看到用户将$scope.displayedCollection 声明为一个空数组，并在收到AJAX 响应时为其分配一个值。但是，文档没有提到这一点。

<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


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

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

那么，我需要自己照顾副本吗？文档是否需要更新？演示如何工作？

[更新] 我在 @tufan-yoc 的 the github issues 上找到了这个

您必须将数据数组复制到范围内的其他变量：

st-table="displayedCollection" st-safe-src="rowCollection"

和

 //copy the references (you could clone ie angular.copy   
 // but then have to go through a dirty checking for the matches)
    $scope.displayedCollection = [].concat($scope.rowCollection);

如果这确实是一项要求，为什么没有明确记录？

为什么智能表网站上的示例没有它也能工作？

【问题讨论】：

标签： angularjs smart-table

【解决方案1】：

你不需要复制任何东西。您使用属性 st-table 设置的只是模板的占位符（即范围内的变量），您可能会在行中继器中使用它，它不必在任何地方声明，智能表将分配项目显示到此变量，以便您的模板可以更新。

您的事实来源（即您的数据）应该是您绑定到 st-safe-src 属性的集合。每当绑定的集合发生变化时，智能表将更新本地副本，以便它可以根据最新和实际数据执行过滤/排序/切片操作。

但是，为了方便（和性能），如果您不打算修改您的数据（或者它的到达不会像 ajax fetch 那样延迟），则内部副本首先基于绑定到设计范围内的变量的任何集合通过 st-table 属性。请注意，在这种情况下，该值将被删除并替换为显示的集合，因此模板会更新。幸运的是，初始副本将作为智能表的私有变量持续存在。

如果您遇到问题，它可能来自其他地方。如果是这样，请提供一个运行示例（带有角度版本和智能表版本）

【讨论】：

只有当我在我的代码中进行复制时它才对我有用，而不是当我不这样做时。我的代码太大而无法发布，但您可以通过注释掉第 18 行在plnkr.co/edit/s407ao?p=preview 看到同样的内容
你在 plunker 上使用的智能表和角度版本已经很老了......
这可以解释它（+1）。我会尽量找时间更新 Plunk（虽然我在家里使用最新版本并且仍然有同样的情况）。

【解决方案2】：

不，这不是越野车。如果您使用stSafeSrc 属性，SmartTables 将创建一个$scope.displayedCollection 对象或用于保存原始数据副本的数组的任何名称。如果它没有向您显示任何数据，请检查您的 rowCollection 对象，它应该包含原始数组。如果您在 Chrome 中工作，请尝试ng-inspector for AngularJS，以便您查看应用程序的范围。此外，如果您可以发布代码的 plunker 会更好。

【讨论】：

【解决方案3】：

我们可以通过查看this Plunk（不是我的）来表明用户必须采取行动进行复制并使其与 AJAX 数据保持同步。

如果我们注释掉第 18 行：

$scope.displayedCollection = [].concat($scope.rowCollection);

按照网上的例子，表格变成空的。

结论：网站文档说错了

smart-table 首先为您显示的收藏创建一个安全副本

而且，奇怪的是，网站上的（工作）示例......不应该工作（？）

【讨论】：