Angularjs 智能 table 不适用于动态数据

Question

我有一种情况，我正在使用 angularJs smart table 进行过滤。

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>

我正在测试 2 个不同的案例。

在我的控制器中，我首先调用相同的函数，但发送虚拟数组，在第二种情况下，我发送从 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 时，排序不起作用。点击它，数据就消失了。我尝试调试以查看当我们单击 filter.But 时是否再次调用 listAllWorkOrderData 函数，它仅在加载页面时调用一次以填充 table.So，这意味着数据存在于 listWorkOrderResponse 中.那为什么不排序呢？

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

任何人都可以指出我在做什么错误。

Answer 1

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

重复您的回复并创建一个新对象并将其推入数组中..

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);
}

Answer 2

我能够通过使用 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 table 中我们添加 stSafeSrc 属性。

来自 Smart Table 文档的 stSafeSrc 属性 http://lorenzofox3.github.io/smart-table-website/

stSafeSrc attribute

If you are bringing in data asynchronously (from a remote database, restful endpoint, ajax call, etc) you must use the stSafeSrc attribute. You must use a seperate collection for both the base and safe collections or you may end up with an infinite loop.

<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>

Angularjs 智能 table 不适用于动态数据

Angularjs Smart table not working for Dynamic data

javascript

angularjs

smart-table