使用角度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對錶格數據排序

回答

相關問題