使用AngularJS

时间:2018-01-24 07:28:38

标签: javascript angularjs sorting

我有一个表有动态数据,我应该能够根据奇数或偶数点击在asc / desc中对每列进行排序。我添加了以下代码

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

这对所有列都有效,除了上次更新时间为2天,2小时,5秒的时候..这会像先前几天,小时然后秒(在这种情况下)那样排序,我想要像第一秒,小时那样天可以任何人建议我该怎么做。我知道我们不能在API方面这样做,因为它基于奇数/偶数点击的动态排序我是角度js的新手。

1 个答案:

答案 0 :(得分:0)

尝试本教程

  

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>

Angular 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 }
   ];

 });