title: Order list ionic 2
body: <p>I have a page with one list from a JSON file. What I want to do it's to add an order by funcionality. I don't understand yet if I need to use @Pipe or if there is a simpler way.
  I'm planning to do it in a modal page.
  Thanks in advance any help will be appreciated.
  modalpage.html:</p>
  
  <pre><code>&lt;ion-toolbar danger&gt;
    &lt;ion-buttons start&gt;
      &lt;button (click)="close()"&gt;
        &lt;ion-icon ios="ios-close" md="md-close"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
    &lt;/ion-buttons&gt;
    &lt;ion-title  text-center&gt;
      Ajustes
    &lt;/ion-title&gt;
    &lt;ion-buttons end&gt;
      &lt;button (click)="applyFilters()"&gt;
        &lt;ion-icon ios="ios-checkmark" md="md-checkmark"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
    &lt;/ion-buttons&gt;
  &lt;/ion-toolbar&gt;  
  &lt;ion-content padding class="rojo"&gt;
    &lt;h2 text-center&gt;Ordenar resultados por:&lt;/h2&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>modalpage.js</p>
  
  <pre><code>import {Page, NavController,ViewController} from 'ionic-angular';
  
  @Page({
    templateUrl: 'build/pages/ajustes-listado/ajustes-listado.html',
  })
  export class AjustesListadoPage {
    static get parameters() {
      return [[NavController],[ViewController]];
    }
  
    constructor(nav, viewController) {
      this.nav = nav;
      this.viewCtrl = viewController;
    }
  
    close(data) {
      this.viewCtrl.dismiss(data);
    }
    applyFilters(){
      console.log('aplicando filtros a la lista');
      this.close();
    }
  }
  </code></pre>
  
  <p>list.html</p>
  
  <pre><code>&lt;ion-navbar *navbar danger&gt;
      &lt;ion-title text-center&gt;Listado&lt;/ion-title&gt;
      &lt;ion-buttons start *ngIf="buscar==false"&gt;
      &lt;button (click)="search()"&gt;
        &lt;ion-icon ios="ios-search" md="md-search"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
    &lt;/ion-buttons&gt;
    &lt;ion-buttons end&gt;
      &lt;button (click)="options()"&gt;
        &lt;ion-icon ios="ios-options" md="md-options"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
    &lt;/ion-buttons&gt;
  &lt;/ion-navbar&gt;
  &lt;ion-content class="listado"&gt;
        &lt;ion-list [virtualScroll]="vets"&gt;
          &lt;button ion-item text-wrap *virtualItem="let vet" (click)="goToDetails(vet)"&gt;
              &lt;ion-avatar item-left&gt;
                  &lt;!-- &lt;ion-img [src]="vet.img || defaultImg"&gt;&lt;/ion-img&gt; --&gt;
                  &lt;img src="{{vet.img}}" onError="this.src='./files/gmaps.png';" /&gt;
              &lt;/ion-avatar&gt;
              &lt;h2&gt;{{vet.nombre}}&lt;/h2&gt;
              &lt;p&gt;Direccion: {{vet.direccion}}&lt;/p&gt;
          &lt;/button&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>list.js</p>
  
  <pre><code>import {DetallesPage} from '../detalles/detalles';
  import {OnInit} from '@angular/core';
  import {Page, NavController, Platform, NavParams, Modal} from 'ionic-angular';
  import {MiServicio} from '../../providers/mi-servicio/mi-servicio';
  import {AjustesListadoPage} from '../ajustes-listado/ajustes-listado';
  
  @Page({
    templateUrl: 'build/pages/listado/listado.html',
    providers:[MiServicio]
  })
  export class ListadoPage {
    static get parameters() {
      return [[NavController],[Platform],[MiServicio]];
    }
  
      constructor(nav,platform, miServicio) {
      this.nav = nav;
      this.platform = platform;
      this.miServ = miServicio;
      this.ngOnInit();
    }
  
    ngOnInit() {
      this.miServ.getVets().subscribe(
          data =&gt; this.vets = data
      );
    }    
  }
  </code></pre>