角度：排序数据表后丢失数据

我排序数据表时遇到一些小问题。我对我的API做了一个查询，我得到了我的数据，但是当我对接口进行排序时，数据消失了。一个主意？角度：排序数据表后丢失数据

myApp.controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
    $http.get('http://dev:5001/api/1/phones'). 
    success(function(data, status) { 
     $scope.phones= data; 
    }); 
}]);

HTML

<div ng-app="myApp"> 
<div ng-controller="MainCtrl"> 
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>IP_ADDRESS</th> 
       <th>MAC_ADDRESS</th> 
       <th>STATUS</th> 
       <th>VERSION</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat='phone in phones'> 
       <td> {{ phone.id }} </td> 
       <td> {{ phone.ip_address }} </td> 
       <td> {{ phone.mac_address }} </td> 
       <td> {{ phone.status }} </td> 
       <td> {{ phone.version }} </td> 
      </tr> 
     </tbody> 
    </table> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
        $('#example').DataTable({ 
         "bPaginate": true, 
         "bLengthChange": false, 
         "bFilter": false, 
         "bInfo": false, 
         "bAutoWidth": true}); 
        }); 
    </script> 
</div>

来源

2016-08-12 Va Bo

你的排序代码在哪里？ –

你使用角度数据表指令？ – MMK

一个想法？

是的。 angular和jQuery数据表都想操纵DOM。当文件加载完成后，两者都将立即采取行动=== ng-repeat在代码达到$(document).ready(function() {时尚未完成，实际上它甚至没有启动。因此，如果您坚持使用不含指令的纯jQuery数据表，则必须将$('#example').DataTable()推入稍后的摘要，其中ng-repeat处理完成。

只需使用的$timeout而不是无用ready()链：

$timeout(function() { 
    $('#example').DataTable({ 
    "bPaginate": true, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": true 
    }) 
})

来源

2016-08-13 08:53:14 davidkonrad

非常感谢您的回答！ –

-1

可以使用OrderBy过滤器，如果你打算只表排序

<tbody> 
      <tr ng-repeat="phone in phones | orderBy:'id'"> 
       <td> {{ phone.id }} </td> 
       <td> {{ phone.ip_address }} </td> 
       <td> {{ phone.mac_address }} </td> 
       <td> {{ phone.status }} </td> 
       <td> {{ phone.version }} </td> 
      </tr> 
     </tbody>

来源

2016-08-12 15:25:05

我知道这个职位是很老，但我使用的指令属性得到了一个解决问题的办法datatable值ng像这样：

<table 
    datatable="ng" 
    class="table table-bordered table-striped table-hover" 
    dt-options="controller.options"> 
</table>

我跳跃，帮助。

来源

2017-11-30 13:49:51

角度：排序数据表后丢失数据

回答

相关问题