Question

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

代码：

Angular 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>

Answer 1

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

{{ 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>

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

Answer 3

试试这个快速修复。

使用朋友中的姓名进行排序的代码

在您的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>

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

3 个答案: