使用AngularJS在標題單擊上對表進行排序，標題單擊同時具有數字和字符串作為列值

Question

我有一個具有動態數據的表，我應該能夠基於奇數或偶數單擊以升序/降序對每一列進行排序。 我添加了以下代碼

 $scope.sortdata=function(column){
             if($scope.sortcolumn!=column)
         $scope.reversesort=true;
     $scope.sortcolumn = column;
     $scope.reversesort=!$scope.reversesort;
 }
 $scope.getsortclass=function(column){
     if($scope.sortcolumn==column){
         return $scope.reversesort?'arrow-down':'arrow-up'
     }`enter code here`
     return '';
 }

這對所有列都按預期工作，除了最后更新時間為2days，2hours，5sec的列之外。這將按天數先排序，然后數小時然后按秒排序（在這種情況下），我想要的像第一秒一樣，小時數然后天數可以一個建議我該怎么做。我知道我們不能在API方面做到這一點，因為它是基於奇數/偶數單擊的動態排序，我對angular js還是陌生的。

Answer 1

試試這個教程

https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

您的程序似乎與表格顯示有關。

HTML：

<div class="container" ng-app="sortApp" ng-controller="mainController">

<div class="alert alert-info">
  <p>Sort Type: {{ sortType }}</p>
  <p>Sort Reverse: {{ sortReverse }}</p>
  <p>Search Query: {{ searchFish }}</p>
</div>

<form>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-search"></i></div>
      <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish">
    </div>      
  </div>
</form>

<table class="table table-bordered table-striped">

<thead>
  <tr>
    <td>
      <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
        Sushi Roll 
        <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
      Fish Type 
        <span ng-show="sortType == 'fish' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'fish' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'tastiness'; sortReverse = !sortReverse">
      Taste Level 
        <span ng-show="sortType == 'tastiness' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'tastiness' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
  </tr>
</thead>

<tbody>
  <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
    <td>{{ roll.name }}</td>
    <td>{{ roll.fish }}</td>
    <td>{{ roll.tastiness }}</td>
  </tr>
</tbody>

</table>

</div>

角度1

angular.module('sortApp', [])

 .controller('mainController', function($scope) {
   $scope.sortType     = 'name'; // set the default sort type
   $scope.sortReverse  = false;  // set the default sort order
   $scope.searchFish   = '';     // set the default search/filter term

   // create the list of sushi rolls 
   $scope.sushi = [
     { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
     { name: 'Philly', fish: 'Tuna', tastiness: 4 },
     { name: 'Tiger', fish: 'Eel', tastiness: 7 },
     { name: 'Rainbow', fish: 'Variety', tastiness: 6 }
   ];

 });