角度jを使用してテーブルデータを並べ替える

Question

"提出日"列に基づいてテーブルデータを並べ替えようとしています。私はいくつかのコードを書いたが、それは動作していないようだ。私がAngular 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> 

Answer 1

ソート機能を書くの主キーは、これが返す

{{ orderBy_expression | orderBy : expression : reverse }} 

使用することです並べ替えられた配列basアイテムに編集されています。 reverseパラメータを指定すると、ソート順序を変更できます。

のは、HTML 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 ''; 
    } 
}; 

の例を見てみましょうが、昇順を検出するか、順序を降順に使用されます。昇順の場合、デフォルト値は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>