Question

我有要在标题上单击以实现排序（升序和降序）的代码

我希望对表格进行排序

Answer 1

要想进一步回答您的问题，最好分享您已经尝试过的内容...但这就是您要寻找的内容：

每个列标题都调用一个函数sortBy，该函数按该列进行排序，默认情况下此操作以升序完成，并且排序顺序更改为降序（因为我们需要在每次单击后切换顺序）
sortBy函数进行排序并因此更新用户界面

下面的代码段：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.dataset = [{
      name: 'ff',
      age: '12'
    }, {
      name: 'gg',
      age: '22'
    }, {
      name: 'jj',
      age: '34'
    }, {
      name: 'dd',
      age: '64'
    }, {
      name: 'hh',
      age: '3'
    },
    {
      name: 'ff',
      age: '32'
    }, {
      name: 'bb',
      age: '54'
    }, {
      name: 'aa',
      age: '87'
    }, {
      name: 'ii',
      age: '18'
    }, {
      name: 'cc',
      age: '69'
    }
  ];
  $scope.nameSort = 'asc';
  $scope.ageSort = 'asc';

  $scope.sortBy = function(passedTitle) {

    if (passedTitle == 'name') {
      if ($scope.nameSort == 'asc') {
        $scope.dataset.sort(function(a, b) {
          var x = a.name.toLowerCase();
          var y = b.name.toLowerCase();
          if (x < y) {
            return -1;
          }
          if (x > y) {
            return 1;
          }
          return 0;
        });
        $scope.nameSort = 'desc';
      } else {
        if ($scope.nameSort == 'desc') {
          $scope.dataset.sort(function(a, b) {
            var x = a.name.toLowerCase();
            var y = b.name.toLowerCase();
            if (x > y) {
              return -1;
            }
            if (x < y) {
              return 1;
            }
            return 0;
          });
          $scope.nameSort = 'asc';
        }
      }
    }

    if (passedTitle == 'age') {
      if ($scope.nameSort == 'asc') {
        $scope.dataset.sort(function(a, b) {
          return a.age - b.age
        });
        $scope.nameSort = 'desc';
      } else {
        if ($scope.nameSort == 'desc') {
          $scope.dataset.sort(function(a, b) {
            return b.age - a.age
          });
          $scope.nameSort = 'asc';
        }
      }
    }
  }

});

th,
td {
  border: 2px double red;
}

button,
button:focus {
  background: transparent;
  border: none;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <table>
    <thead>
      <th> <button type='button' ng-click="sortBy('name')">Name</button></th>
      <th> <button type='button' ng-click="sortBy('age')">Age</button></th>
    </thead>
    <tbody>
      <tr ng-repeat='data in dataset'>
        <td> {{data.name}} </td>
        <td> {{data.age}} </td>
      </tr>

    </tbody>
  </table>

</div>

在带有列的大括号内是否有排序功能

1 个答案: