使用角度js对表格数据排序

我想根据列“提交日期”对表格数据进行排序。我写了一些代码，但它似乎并没有工作。因为我是Angular JS的新手，所以我需要一些指导。请帮忙。使用角度js对表格数据排序

代码：

角JS：

vm.sotData = function (column) { 
     vm.reverseSort = (vm.sortColumn == column) ? !vm.reverseSort : false; 
     vm.sortColumn = column; 
    }

HTML代码：

<th style="width:13%" ng-click="">Total Amt<span ng-class=""></span></th> 
<th style="width:7%" ng-click="">Status<span ng-class=""></span></th> 
<th style="width:7%" ng-click="vm.sotData('SubmittedDate')">Submitted Date 
     <span ng-class="vm.getSortClass('SubmittedDate')"></span> 
</th>

来源

2017-09-27 shrey Pav

什么是'SubmittedDate'的数据类型？当你说排序，这是否意味着最近应该在顶部..对吗？ –

@ Vikash.777它的Datetime类型。是的，它是假设按照最新的第一 –

写排序功能的主要关键是使用

{{ orderBy_expression | orderBy : expression : reverse }}

这将返回一个排序阵列编辑该项目。您可以通过指定反向参数来更改排序顺序。

让我们的下面阵列

$scope.friends = [ 
    {sno:1,name:'Yogesh Singh',age:23,gender:'Male'}, 
    {sno:2,name:'Sonarika Bhadoria',age:23,gender:'Female'}, 
    {sno:3,name:'Vishal Sahu',age:24,gender:'Male'}, 
    {sno:4,name:'Sanjay Singh',age:22,gender:'Male'} 
]; 

// column to sort 
$scope.column = 'sno'; 

// sort ordering (Ascending or Descending). Set true for descending 
$scope.reverse = false; 

// called on header click 
$scope.sortColumn = function(col){ 
    $scope.column = col; 
    if($scope.reverse){ 
    $scope.reverse = false; 
    $scope.reverseclass = 'arrow-up'; 
    }else{ 
    $scope.reverse = true; 
    $scope.reverseclass = 'arrow-down'; 
    } 
}; 

// remove and change class 
$scope.sortClass = function(col){ 
    if($scope.column == col){ 
    if($scope.reverse){ 
    return 'arrow-down'; 
    }else{ 
    return 'arrow-up'; 
    } 
    }else{ 
    return ''; 
    } 
};

在HTML reverse用于检测升序或降序排序的例子。对于升序，默认值设置为false。

<table border='1'> 
    <tr > 
    <th ng-click='sortColumn("sno")' ng-class='sortClass("sno")'>S.no</th> 
    <th ng-click='sortColumn("name")' ng-class='sortClass("name")'>Name</th> 
    <th ng-click='sortColumn("age")' ng-class='sortClass("age")'>Age</th> 
    <th ng-click='sortColumn("gender")' ng-class='sortClass("gender")'>Gender</th> 
    </tr> 
    <tr ng-repeat='friend in friends|orderBy:column:reverse'> 
    <td width='20%' align='center'>{{friend.sno}}</td> 
    <td width='35%' align='center'>{{friend.name}}</td> 
    <td width='20%' align='center'>{{friend.age}}</td> 
    <td width='25%' align='center'>{{friend.gender}}</td> 
    </tr> 
    </table>

来源

2017-09-27 04:02:16

排序感谢这么好的解释。我在这里有一个问题。表格的值通过ajax调用（javascript）。我在那里输入价值观。 ng-repeat的效果会如何？ –

不会有问题，绑定列表可以是任何数据源。 –

很酷。得到它了。谢谢！！帮助我很多 –

<th style="width:13%" ng-click="">Total Amt<span ng-class=""></span></th> 
    <th style="width:7%" ng-click="">Status<span ng-class=""></span></th> 
    <th style="width:7%" ng-click="vm.sotData('SubmittedDate')">Submitted Date 
      <span class="fa" ng-class="{'fa-caret-down':sortType.type=='SubmittedDate' && sortType.order==-1 , 
      'fa-caret-up':sortType.type=='SubmittedDate' && sortType.order==1}"> </span></th> 

    /*for sorting Column*/ 
     $scope.vm.sotData= function (type) { 
       $scope.sortType.order = $scope.sortType.order === 1 ? -1 : 1; 
       if ($scope.sortType.order == '1') { 
        $scope.sortBy = type; 
       } 
       else { 
        $scope.sortBy = '-' + type; 
       } 
     };

来源

2017-09-27 04:40:18

@ Vikas.777我试过你的解决方案。它抛出一个错误“$范围没有定义” –

注入$范围作为您的控制器的依赖，然后$范围将工作 –

试试这个速战速决。

准则按朋友的名称排序

在你的HTML，

在表头

第一变化对于其排序是必须要做的： -

<th style="width:7%" ng-click="orderByField='name'; reverseSort = !reverseSort"">Friend Name<span ng-class=""></span></th>

在表行

第二变化

<tr ng-repeat="friend in Friends | orderBy:orderByField:reverseSort">....</tr>

来源

2017-09-27 06:16:24

使用角度js对表格数据排序

回答

相关问题