在angularjs中排序表日期列

Question

我在表中有一個日期列。嘗試對點擊列標題的日期列進行排序。目前的代碼是基於日期而不是整個日期進行排序。

<div ng-click="sortType = 'startDate'; sortReverse = !sortReverse;"> 
    Start Date<span class="mandatory">*</span> 
    <span class="glyphicon sort-icon" 
      ng-show="sortType=='startDate'" 
      ng-class="{ 
       'glyphicon-chevron-up':sortReverse, 
       'glyphicon-chevron-down':!sortReverse 
      }"> 
    </span> 
</div> 
... 
<tr ng-repeat="row in filteredTableData | orderBy:sortType:sortReverse" on-finish-render="invokDatePicker"> 
    <td style="display:none"> 
     <input type="hidden" ng-model="row.hiddenStartDate" value="{{row.hiddenStartDate}}"> 
    </td> 
    <td style="display:none"> 
     <input type="hidden" ng-model="row.hiddenStartDate" value="{{row.hiddenStartDate}}"> 
    </td> 
</tr> 

Answer 1

我有一個與你的問題相同的例子。我認爲它可以幫助你Sort Columns Using Table Header

<div data-ng-app = "myModule"> 
    <div data-ng-controller = "ngSortTableHeader"> 
     <input type="text" placeholder="Search By Number" data-ng-model="searchText.sNumber"> 
     <input type="text" placeholder="Search By Version" data-ng-model="searchText.version"> 
     <input type="text" placeholder="Search By Principal Investigator" data-ng-model="searchText.pInvestigator"> 
     <input type="checkbox" data-ng-model="hideShow"> Hide Last Saved   
     <br><br> 
     <table> 
      <thead> 
       <tr> 
        <th data-ng-click = "shortColumn('sNumber')">Number<div data-ng-class = "getClass('sNumber')"></div></th> 
        <th data-ng-click = "shortColumn('title')">Title<div data-ng-class = "getClass('title')"></div></th> 
        <th data-ng-click = "shortColumn('version')">Version<div data-ng-class = "getClass('version')"></div></th> 
        <th data-ng-click = "shortColumn('pInvestigator')">Principal Investigator<div data-ng-class = "getClass('pInvestigator')"></div></th> 
        <th data-ng-click = "shortColumn('lSaved')" data-ng-hide="hideShow">Last Saved<div data-ng-class = "getClass('lSaved')"></div></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-ng-repeat="protocol in protocols | orderBy:columnName:revSort | filter:searchText:exactMatch" data-ng-class="$even ? 'odd' : 'even'"> 
        <td>{{ protocol.sNumber | uppercase }}</td> 
        <td>{{ protocol.title }}</td> 
        <td>{{ protocol.version | lowercase }}</td> 
        <td>{{ protocol.pInvestigator }}</td> 
        <td data-ng-hide="hideShow">{{ protocol.lSaved | date:"dd/mm/yyyy" }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

JSCode：

var myApp = angular 
        .module('myModule', []) 
        .controller("ngSortTableHeader", function($scope){ 
         var protocols = [  
         {sNumber: "LIVKR-2015", title: "Contrary to popular belief", version: "Version 9", pInvestigator: "Michael Tardif", lSaved: new Date("November 23, 2015")}, 
         {sNumber: "LIVHCC-2015", title: "A long established fact", version: "Version 1", pInvestigator: "Zain Man", lSaved: new Date("May 05, 2015")}, 
         {sNumber: "LIKKCC-2015", title: "The standard chunk of Lorem Ipsum", version: "Version 9", pInvestigator: "Pauline Elipane", lSaved: new Date("August 15, 2015")}, 
         {sNumber: "LICPCC-2015", title: "Many variations of passages of Lorem Ipsum available", version: "Version 2", pInvestigator: "Ezekiel Nwite", lSaved: new Date("October 27, 2015")}, 
         {sNumber: "LMLHCC-2015", title: "Always free from repetition, injected humour", version: "Draft", pInvestigator: "Steve Jobs", lSaved: new Date("December 30, 2015")} 
         ]; 

         $scope.protocols = protocols; 
         $scope.columnName = "sNumber"; 
         $scope.revSort = false; 
         $scope.shortColumn = function(column){ 
          $scope.revSort = ($scope.columnName == column)? !$scope.revSort : false; 
          $scope.columnName = column; 
         } 
         $scope.getClass = function(column){ 
          if($scope.columnName == column){ 
           return $scope.revSort ? 'arrowDown' : 'arrowUp';        
          } 
          return '';      
         } 
        });