ng-repeat排序箭头在javascript数据表中不起作用

我对AngularJs和数据表很新。 我需要使用ng-repeat填充表行中的数据。 我能够填充行并首次启用排序。 当我点击箭头来排序或下降行数据擦除。

这是我的表格数据

 <!--  --> <!--  --> 
 
 
 
Campaign Name
 
Description
 
Activate/Deactivate
 
edit
status
Details
 
 
 
 
{{campaign.campaignObject.campaignName}}
 
{{campaign.campaignObject.campaignMessage}}
 
 {{ campaign.campaignObject.label }}  
 
?campaignId={{ campaign.campaignObject.id }}"> " > 
 
 
  

这是我的排序javascript代码

  $(document).ready(function() { $("#noCampaignData").hide(); //$("#example_paginate").hide(); var rowCount = $("#example tr").length; console.log("Row count value is"+rowCount); if (rowCount >= 0) { console.log("Entered into Sorting"); $("#example").dataTable({ "pagingType" : "full_numbers", "order" : [ [ 2, "desc" ] ] }); } });  

我得到的行数为tr是1

我在页面底部包含了js文件

 "> "> 

当我使用ng-repeat加载数据时的精细加载。 但是当我点击标题以升序或降序排序时，行将被删除。

请告诉我我哪里做错了？ 我无法对数据进行升序排序，降序和分页根本不起作用。

对不起我的英语不好。

Answer 1

没有冒犯，但这是jQuery和Angular思维的典型混淆，或者缺乏对Angular如何工作的理解。 这里尝试将一些jQuery逻辑包装到角度摘要循环中 。 如果我有一个jQuery背景，请阅读“Thinking in AngularJS”这个问题的一个很好的答案？

你不能组合$(document).ready(function() {和Angular。事实上，你可以非常肯定你的ready()在Angular完成ng-repeat业务之前就已经执行了。这就是为什么你总是得到1表示行计数（标题）以及当您单击标题时行消失的原因。当您获得行计数时，没有插入任何行，并且在您实例化dataTable() ，没有行插入。

您可以使用$timeout强制延迟代码，或强制它进入下一个摘要循环：

 $scope.initDataTable = function() { $timeout(function() { $("#noCampaignData").hide(); //$("#example_paginate").hide(); var rowCount = $("#example tr").length; console.log("Row count value is"+rowCount); if (rowCount >= 0) { console.log("Entered into Sorting"); $("#example").dataTable({ "pagingType" : "full_numbers", "order" : [ [ 2, "desc" ] ] }); } }, 200) } 

或者创建一个指令 ，一旦数据被ng-repeat填充，就会实例化dataTable，如ng-repeat finish事件的多个答案所示：

 .directive('repeatDone', function() { return function(scope, element, attrs) { if (scope.$last) { // all are rendered scope.$eval(attrs.repeatDone); } } }) 

…

…

 $scope.initDataTable = function() { $("#noCampaignData").hide(); $("#example").dataTable({ ... }); } 

希望这会帮助你。

Answer 2

下面的示例使用AngularJs和Datatable。 过滤，分页和排序都很好。

下载angular-datatable并将angular-datatables.min.js文件放入项目中，就像我在行

希望这可以帮到你。

            
 
 
 
 
Name
 
City
 
Country
 
 
 
 
 
{{name.Name}}
 
{{name.City}}
 
{{name.Country}}