angularjs - directivas - cómo usar el botón de filtro en, haga clic en angular js

directivas personalizadas angularjs

Question

podría por favor decirme cómo ordenar el conjunto en orden ascendente o descendente al hacer clic en el botón. De hecho, tengo un botón en el encabezado "V". botón de uso haga clic en Quiero mostrar datos en orden ascendente. En realidad estoy haciendo una vista de cuadrícula en Iónico usando js angulares. Pero quiero ordenar eso usando el botón clic. Necesito ordenar la tabla de acuerdo a la primera columna. Porque el usuario hace clic en la primera columna "V".

aquí está mi código

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

Resultado esperado después del clic del botón

Calls   Royal Dutch sell

p        a royal data

Xgtyu     test royal data

¿Podemos ordenar la columna y mostrar en la vista al hacer clic en el botón?

  <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

si sus data son una matriz, puede usar el filtro Ordenar Por. Ver el documento oficial aquí: https://docs.angularjs.org/api/ng/filter/orderBy

Answer 2

EDITAR: ordena ambas direcciones

Plunker actualizado

Para poder ordenar en ambas direcciones, probablemente debería usar una directiva. El uso de una directiva le permitirá crear un alcance aislado para cada uno de los encabezados, de esta manera puede hacer un seguimiento de sus propios valores actuales.

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

Esta directiva tiene propiedades para:

1. label [ string ] El nombre del encabezado de la columna.
2. index [ cadena ] El índice de columna en el conjunto de datos original . Tenga en cuenta que no puede usar el índice $ de ng-repeat.
3. sort-exp [ method ] Este es un método enlazable que puede usar para recuperar el índice actual y los valores inversos para establecer su orden por expresión de filtro. La función pasa dos valores: idx, reverse , en ese orden. Estos representan el índice del elemento actual y el orden inverso como un booleano .

Usas la directiva de la siguiente manera:

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

Y, en su controlador, puede enlazar al sort-exp con una función:

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

Finalmente, en su ng-repeat, puede configurar su ordenPor filtrar con los valores de alcance que utilizó para definir la expresión de ordenación (en este caso $ scope.sortval) y el orden de clasificación (en este caso $ scope.reverse):

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