AngularJS智能表格无法处理动态数据

Question

我是一个有用的助手，可以将文本翻译成中文。

我遇到了一个情况，在其中我正在使用angularJs智能表进行过滤。

HTML代码：

<section class="main" ng-init="listAllWorkOrderData()">
    <table st-table="listWorkOrderResponse">
     <thead>
            <tr>
                <th st-sort="id">ID <i></i></th>
                <th st-sort="project">Project <i></i></th>
            </tr>
     </thead>
     <tbody ng-repeat="workOrder in listWorkOrderResponse">
             <tr>
                <td>{{workOrder.id}}</td>
                <td>{{workOrder.project}}</td>
             </tr>
             <tr>
                <td></td>
             </tr>
     </tbody>
    </table>
</section>

我正在测试两个不同的情况。

在我的控制器中，首先我调用相同的函数，但是发送虚拟数组，在第二种情况中，我发送从API调用收到的数组。

1. Dummy data


$scope.listAllWorkOrderData = function () {
     var listWorkOrderResponse = [{"id":"1","project":"project1"},{"id":2,"project":"project2"},{"id":"3","project":"project3"}];
    }

2. I am using a service and fetching data through api.

        $scope.listAllWorkOrderData = function () {
                    TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
                        if (response != undefined && response != null) {
                            if (!$scope.listWorkOrderResponse) {
                                $scope.listWorkOrderResponse = [];
                            }
                            $scope.listWorkOrderResponse = response;
     }, function (response, status, headers, config) {
                        console.log(response);
                    });

当我使用case1时，排序正常工作。但是当我使用case2时，排序不起作用。单击它后，数据就会消失。 我尝试过调试，看看在单击筛选器时是否再次调用了listAllWorkOrderData函数。但它只在加载页面以填充表格时调用一次。那么这意味着数据存在于listWorkOrderResponse中。那为什么它不排序呢？

我通过打印两种情况的响应来检查它们，唯一的区别是来自api调用的listWorkOrderResponse新增了$$hashKey: "object:363"。

有人能指出我犯了什么错误吗？

- Yasmeen

Answer 1

我能够通过使用stSafeSrc属性来解决这个问题。

在控制器中，我们添加了：

    $scope.listAllWorkOrderData = function () {
                TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
                    if (response != undefined && response != null) {
                        if (!$scope.listWorkOrderResponse) {
                            $scope.listWorkOrderResponse = [];
                        }
                        $scope.listWorkOrderResponse = response;
                        // we add one more list.
                        $scope.displayedWOList = [].concat($scope.listWorkOrderResponse);
 }, function (response, status, headers, config) {
                    console.log(response);
                });

然后在html表格中，我们添加stSafeSrc属性。

从Smart Table文档中获取stSafeSrc属性http://lorenzofox3.github.io/smart-table-website/

stSafeSrc属性

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

<section class="main" ng-init="listAllWorkOrderData()">
        <table st-table="displayedWOList" st-safe-src="listWorkOrderResponse">
         <thead>
                <tr>
                    <th st-sort="id">ID <i></i></th>
                    <th st-sort="project">Project <i></i></th>
                </tr>
         </thead>
         <tbody ng-repeat="workOrder in displayedWOList">
                 <tr>
                    <td>{{workOrder.id}}</td>
                    <td>{{workOrder.project}}</td>
                 </tr>
                 <tr>
                    <td></td>
                 </tr>
         </tbody>
        </table>
    </section>

- Yasmeen

Answer 2

为什么它不起作用我不知道，但你可以通过以下方式解决它

重复你的响应并创建一个新对象，然后将其推入数组中...

var res = [];
for(var i=0; i<response.length; i++) {
    var x = {"id":response[i].id, "project":response[i].project};
    arr[i] = angular.copy(x);
}

- Manikanta Reddy

---

是的，但在该响应中，我们正在删除$$hashkey。 - Manikanta Reddy

我不知道为什么会发生这种情况。但是我也遇到了同样的问题。 - Manikanta Reddy

好的。现在要删除每一行中的$$hashkey，我必须对此响应进行多次迭代。这样做是否可取？ - Yasmeen

如果您找到了其他解决方案，只需将其网址放下，这也会帮助我学习。 - Manikanta Reddy

我已经发布了解决方案，请看看它是否对你有帮助。 - Yasmeen