javascript - 在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>

JS代码:

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