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

I am trying to sort the table data based on the column "Submitted Date" . I have written some code but it doesn't seem to be working. As I am new to Angular JS I need some guidance here. Please help.

我正在尝试根据“提交日期”列对表数据进行排序。我写了一些代码，但似乎没有用。由于我是Angular JS的新手，我需要一些指导。请帮忙。

code:

码：

Angular js:

角度js：

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

Html Code:

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>

3 个解决方案

#1

The main key of writing sorting functionality is to use

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

{{ orderBy_expression | orderBy : expression : reverse  }}

This returns a sorted Array based on the item. You can change the sorting order by specifying the reverse parameter.

这将返回基于项目的已排序数组。您可以通过指定反向参数来更改排序顺序。

Let's take the example of below array

我们以下面的数组为例

$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 '';
  }
 };

In html reverse is used for detecting ascending or descending ordering. The default value set to false for ascending.

在html中反向用于检测升序或降序。升序设置为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>

#2

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

#3

Try this quick fix.

试试这个快速修复。

Code for sorting with Name in Friends

在Friends中使用Name进行排序的代码

In your HTML,

在你的HTML中，

1st change in table header for which sorting is to be done:-

要对其进行排序的表头中的第一个更改： -

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

2nd change in table row

表格行的第二次更改

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

#1