Angularjs智能表不支持动态数据

Angularjs Smart table not working for Dynamic data

本文关键字：动态 数据 不支持 智能 Angularjs      更新时间：2023-09-26

我有一个情况，我使用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);
                    });

当我使用case时，排序工作得很好。但是当我使用案例2时，排序不起作用。点击它，数据就消失了。我试着调试，看看当我们点击过滤器时，listAllWorkOrderData函数是否再次被调用。但它只在加载页面填充表时调用一次。这意味着数据出现在listWorkOrderResponse中。那为什么不排序呢?

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

谁能指出我犯了什么错误?

我可以通过使用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属性。

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>

为什么不工作，我不知道，但你可以通过下面的操作来解决

重复你的回答&创建一个新对象&

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);
}
相关文章：