Question

你能告诉我如何在按钮点击时按升序或降序排序数组。实际上我在标题上有一个按钮＆＃34; V＆＃34; 。使用按钮单击我想按升序显示数据。实际上我正在使用角度js在Ionic中制作网格视图。但我想使用按钮点击对其进行排序。我需要根据第一列对表进行排序。因为用户点击第一栏＆＃34; V＆＃34;。

这是我的代码

http://plnkr.co/edit/UloVItuyLLvmeo34R4gX?p=preview

点击按钮后的预期结果

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>

Answer 1

如果您的data是一个数组，那么您可以使用orderBy过滤器请参阅此处的官方文档：https://docs.angularjs.org/api/ng/filter/orderBy

Answer 2

编辑：对两个方向进行排序

Updated Plunker

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

.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。它们表示当前元素的索引和反向顺序，如 boolean 。

您可以按如下方式使用该指令：

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

并且，在您的控制器中，您可以使用函数绑定到sort-exp：

$scope.setSort = function(idx, reverse){
  $scope.sortval = 'columns['+idx+'].value';
  $scope.reverse = reverse;
};

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

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

如何在角度js中使用按钮单击按钮

2 个答案:

Updated Plunker