如何在angular js中点击按钮时使用过滤器 [英] how to use filter on button click in angular js

问题描述

你能告诉我如何在单击按钮时按升序或降序对数组进行排序.实际上我在标题V"上有一个按钮.使用按钮单击我想按升序显示数据.实际上我正在制作一个网格使用 angular js 在 Ionic 中查看.但我想使用按钮单击对其进行排序.我需要根据第一列对表格进行排序.因为用户单击第一列V".

这是我的代码

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

按钮点击后的预期结果

调用荷兰皇家出售p 皇家数据Xgtyu测试皇家数据

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

 
<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 class="row mrginrightleft" ng-repeat="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">

解决方案

双向排序

更新的Plunker

为了能够双向排序，您可能应该使用指令.使用指令将允许您为每个标题创建一个独立的范围，这样它们就可以跟踪自己的当前值.

.directive('sortHeader', function($timeout) {返回 {限制:'E'，范围: {'标签': '@'，'sortstring': '&sortExp','idx': '@index'},templateUrl: 'sort-header.html',链接:函数(范围，元素，属性){scope.reverse = false;element.on('点击', function(){$超时(功能(){scope.reverse = !scope.reverse;});});}};});

该指令具有以下属性:

1. label [string] 列标题名称.
2. index [string] 原始数据集中的列索引.请注意，您不能使用 ng-repeat 的 $index.
3. sort-exp [method] 这是一个可绑定的方法，您可以使用它来检索当前索引和反向值以设置您的 orderBy 过滤器表达式.该函数按顺序传递两个值:idx, reverse.它们将当前元素的索引和反向顺序表示为 boolean.

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

而且，在您的控制器中，您可以使用一个函数绑定到 sort-exp:

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

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

ng-repeat="displayData 中的列 |orderBy: sortval:reverse |过滤器:查询"

could you please tell me how to sort array in ascending or descending order on button click .Actually I have a button on header "V" .using button click I want to display data in ascending order .Actually I am making a grid view in Ionic using angular js .But I want to sort that using button click .I need to sort table according to first column .Because user click on first column "V".

here is my code

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

Expected result after button click

Calls   Royal Dutch sell

p        a royal data

Xgtyu     test royal data

can we sort the column and display on view on button click ?

  <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>

解决方案

EDIT: Sort both directions

Updated Plunker

To be able to sort in both directions, you should probably use a directive. Using a directive will allow you to create an isolated scope for each of the headings, this way they can keep track of their own current values.

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

This directive has properties for:

1. label [string] The column header name.
2. index [string] The column index in the original data set. Note, you cannot use the $index of the ng-repeat.
3. sort-exp [method] This is a bindable method that you can use to retrieve the current index and reverse values to set your orderBy filter expression. The function passes two values: idx, reverse, in that order. These represent the index of the current element and reverse order as a boolean.

You use the directive as follows:

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

And, in your controller, you can bind to the sort-exp with a function:

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

Finally, in your ng-repeat, you can set up your orderBy filter with the scope values that you used to define the sort expression (in this case $scope.sortval) and the sort order (in this case $scope.reverse):

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

这篇关于如何在angular js中点击按钮时使用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！