Question

我试图设置一个可点击的表列标题，在第一次单击时对升序进行排序，在再次单击时降序为Descending。我的提升排序工作正常，但我不确定如何在我的OrderBy中设置表达式来排序降序

到目前为止我的设置：

表格html类似于

<th ng-click="sort('LastName')">Last Name</th>

我的排序方法看起来像

scope.sort = function (columnName) {
    if (angular.isDefined(scope.filter)) {
        if (scope.filter.SortColumn == columnName) {
            scope.filter.SortColumn = columnName;
            scope.filter.SortDirection = scope.filters.SortDirection == "Asc" ? "Desc" : "Asc";
        } else {
            scope.filter.SortColumn = columnName;
            scope.filter.SortDirection = "Asc";
        }
    }
 };

我的ng-repeat看起来如下

<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn">

如何让SortDirection进入orderBy？

Answer 1

简单地反转你就改成它：

<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : true">

最好是在控制器中使用布尔值，但这也应该有效：

<tbody ng-repeat="name in resp.Names | orderBy : filter.SortColumn : filter.SortDirection === 'Desc'">

只是为了好玩，以下是我在表格中进行过滤排序的方式。

控制器：

$scope.search = { query: ''};
$scope.sort = { field: 'defaultField', descending: true};

$scope.order = function(newValue) {
  if(newValue === $scope.sort.field) {
    $scope.sort.descending = !$scope.sort.descending;
  } else {
    $scope.sort = {field: newValue, descending: false};
  }
};

$scope.filteredDocuments = function() {
  var a = $filter('filter')($scope.documents, {$:$scope.search.query});
  var b = $filter('orderBy')(a, $scope.sort.field, $scope.sort.descending);
  return b;
};

过滤搜索框：

<input type="text" ng-model="search.query">

列标题：

  <th nowrap>
    <a href ng-click="order('size')">Size </a>
    <i ng-show="sort.field === 'size' && !sort.descending" class="fa fa-sort-amount-asc"></i>
    <i ng-show="sort.field === 'size' && sort.descending" class="fa fa-sort-amount-desc"></i>
  </th>

行绑定：

  <tr ng-repeat="d in filteredDocuments()" >

Answer 2

上述答案的简化版本：

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')" >Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:mySortOrder">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
    $scope.sorts={};
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
        if(x in $scope.sorts) {
        	$scope.sorts[x]=!$scope.sorts[x];
        } else {
        	$scope.sorts[x]=false;
        }
        $scope.mySortOrder=$scope.sorts[x];
    }
});
</script>

</body>
</html>

＆＃13;

获取AngularJS orderBy可以对两个方向进行排序

2 个答案: