Angularjs 如何在angular js中单击按钮时使用过滤器

你们能告诉我如何在点击按钮时按升序或降序排列数组吗？实际上我在标题“V”上有一个按钮.使用按钮单击我想以升序显示数据。实际上，我正在使用angular js在Ionic中创建网格视图。但我想使用按钮单击对其进行排序。我需要根据第一列对表进行排序。因为用户单击第一列“V”

这是我的密码

单击按钮后的预期结果

Calls   Royal Dutch sell

p        a royal data

Xgtyu     test royal data

我们可以对列进行排序并在单击按钮时显示在视图上吗

  <div class="row gray-20 mrginrightleft">
    <div class="col col-center " ng-repeat="d in data | filter:{checked: true}"><i class="button button-icon icon ion-arrow-down-b" ng-click="sortdata()"></i><strong>{{d.label}}</strong></div>
    <div class="col col-10 text-center ">
      <button class=" button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
    </div>
  </div>
  <div class="row mrginrightleft" ng-repeat="column in displayData | filter: query">
    <div class="col col-center brd" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
    <div class="col col-10 text-center brd">
    </div>
  </div>

{{d.label}
{{field.value}}

如果

数据是数组，则可以使用orderBy筛选器
请参见此处的官方文件：
编辑：双向排序

为了能够在两个方向上进行排序，您可能应该使用一个指令。使用指令将允许您为每个标题创建一个独立的范围，这样他们就可以跟踪自己的当前值

.directive('sortHeader', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      'label': '@',
      'sortstring': '&sortExp',
      'idx': '@index'
    },
    templateUrl: 'sort-header.html',
    link: function(scope, element, attrs) {
      scope.reverse = false;
      element.on('click', function(){
        $timeout(function(){
          scope.reverse = !scope.reverse;
        });
      });
    }
  };
});

本指令具有以下属性：

label
[string]列标题名称
index
[string]原始数据集中的列索引。注意，不能使用ng repeat的$index

sort exp
[method]这是一个可绑定的方法，可用于检索当前索引并反转值以设置orderBy筛选器表达式。函数按该顺序传递两个值：
idx，reverse
。它们表示当前元素的索引，并以布尔值的形式反向排列
您可以按如下方式使用该指令：

<sort-header label="{{d.label}}" index="{{d.index}}" sort-exp="setSort(idx, reverse)"></sort-header>

最后，在ng repeat中，您可以使用用于定义排序表达式（在本例中为$scope.sortval）和排序顺序（在本例中为$scope.reverse）的范围值设置orderBy筛选器：

是的，我从这个链接知道这一点，但如果我有嵌套数组，请检查我的plunker..请检查这个displayData对象实际上我是使用两个对象data和displayData显示数据的。这就是为什么我要面对from对我的column@aorfeve你有什么想法吗？可以换一个数组并填充所有数据吗？如果你没有，请删除这个答案我知道答案，因为答案不正确。先生，我有一个问题。我们能在同一个按钮点击时在“升序”和“降序”之间切换吗？换句话说，在按钮点击时，我们按升序显示。现在我需要在同一个按钮上按降序显示我更新了Plunker和我的答案。我以前的方法有一个主要错误，那就是我依赖于ng repeat的$index值。当然，当您有隐藏列时，这是有缺陷的，因为repeat中列的索引与displayData中相应对象的索引不匹配。我通过转换数据对象，为每个对象添加一个固定的索引属性，解决了这个问题。你能看看我的最后一个问题吗
$scope.setSort = function(idx, reverse){
  $scope.sortval = 'columns['+idx+'].value';
  $scope.reverse = reverse;
};

ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query"