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

问题描述

请你告诉我如何按升序排列或按钮降序点击。其实我对头V的按钮。采用按钮点击我要显示升序排列数据。其实我想提出一个网格鉴于离子采用了棱角分明的JS。但我要排序，使用按钮点击。我需要根据第一列V第一列。因为用户点击排序表。

这是我的code

http://plnkr.co/edit/UloVItuyLLvmeo34R4gX?p=$p$ PVIEW

按钮后点击预期结果

 通话荷兰皇家卖P A王室数据Xgtyu测试数据王室
 

我们可以点击按钮排序视图中的列和显示？

 ＆LT; D​​IV CLASS =排灰20 mrginrightleft＆GT;
    ＆LT; D​​IV CLASS =COL COL-中心NG重复=，在数据D |过滤器：{检查：真正}＆GT;＆LT; I类=按钮按钮图标图标离子箭头向下-BNG - 点击=sortdata（）＆GT;＆LT; / I＆GT;＆LT;强＆GT; {{d.label}}＆LT; / STRONG＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL COL-10文本中心＆GT;
      ＆LT;按钮类=按钮图标图标离子齿轮BNG点击=openPopover（$事件）＆GT;＆LT; /按钮＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =，在displayData栏|过滤器：查询行mrginrightleftNG重复=＆GT;
    ＆LT; D​​IV CLASS =COL COL-中心BRDNG重复=字段column.columnsNG秀=数据[$指数] .checked＆放大器;＆放大器;数据[$指数] .fieldNameOrPath ===场.fieldNameOrPath＆GT; {{field.value}}＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL COL-10文本的中心BRD＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

编辑：排序两个方向

更新Plunker

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

  .directive（'sortHeader'，函数（$超时）{
  返回{
    限制：'E'，
    范围： {
      '标签'： '@'，
      sortstring'：'和; sortExp'，
      IDX'：'@index
    }，
    templateUrl：排序了header.html'，
    链接：功能（范围，元素，ATTRS）{
      scope.reverse = FALSE;
      element.on（'点击'，功能（）{
        $超时（函数（）{
          scope.reverse = scope.reverse！;
        }）;
      }）;
    }
  };
}）;
 

该指令有属性：

1. 标签 [字符串的]列头名。


2. 首页 [字符串的]列索引在原始数据集即可。请注意，您不能使用NG重复的$索引。


3. 排序EXP [方法的]这是你可以用它来检索当前指数和反向值来设置你的排序依据可绑定的方法过滤前pression。该函数将两个值： IDX，反向，按照这个顺序。这些重新present当前元素的索引和逆序作为的布尔的

您使用的指令如下：

 ＆LT;排序标题标签={{d.label}}指数={{d.index}}之类-EXP =setSort（IDX，反向） ＆GT;＆LT; /排序头＆GT;
 

和，在你的控制器，可以绑定到排序EXP带功能：

  $ scope.setSort =功能（IDX，反向）{
  $ scope.sortval ='列['+ IDX +']的值。';
  $ scope.reverse =反转;
};
 

最后，在NG-重复，你可以设置你的OrderBy过滤器，您用来定义排序前pression（在这种情况下，$ scope.sortval）的范围值和排序顺序（在此案例$ scope.reverse）：

  NG-重复=在displayData栏|排序依据：sortval：反转|过滤器：查询
 

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"

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