在标题单击时对表进行排序,该表使用AngularJS将数字和字符串作为列值



我有一个包含动态数据的表,我应该能够根据奇数或偶数单击在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 端做到这一点,因为它的动态排序基于奇数/偶数点击我是 Angular js 的新手。

试试本教程

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

最新更新