2016-07-27 3 views
1

Im mit Angular 2 & Typoskript.Was könnte eine schnelle und schnelle Möglichkeit sein, die UI-Liste neu zu sortieren?

In meinem Projekt im eine einfache Liste von JSON-Objekte, sieht die html wie folgt präsentiert:

<div> 
    <!-- Present List Button --> 
    <button md-button 
      (click)="showList()" 
      class="md-primary" 
      title="show list">Cropping</button> 
</div> 


<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

sehr einfache Liste.

Jetzt möchte ich eine Art von Methode, um diese Liste neu zu ordnen und die Listen-Array auf die neue Reihenfolge festlegen.

Ich bin auf der Suche nach einer Methode, die ein Benutzer die Liste neu anordnen, aber er will, wie die Liste nach Priorität ändern.

Könnte mir bitte jemand helfen, eine Methode zu finden, die schnell implementiert werden kann und gut funktioniert?

(Ich sah in einigen Drag & Drop-Bibliotheken, aber ich arbeite mit spezifischen ver von Angular 2 (2.0.0-beta.15), die nicht von ihnen Unterstützung.)

Dank zuzuteilen!

+0

Versuch: lists.reverse(); – Avi

Antwort

0

dafür haben Sie für weitere Informationen Winkel 2-Rohr verwenden, überprüfen this

orderBy Rohr

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: "orderBy", 
    pure: false, 
}) 

export class OrderBy implements PipeTransform { 
    transform(array: any, args: any) { 
    if (array != null) { 
     if (array) { 
     let orderByValue = args; 
     let byVal = 1 
     if (orderByValue.charAt(0) == "!") { 
      byVal = -1 
      orderByValue = orderByValue.substring(1) 
     } 


     array.sort((a: any, b: any) => { 
      if (a[orderByValue].toString().toLowerCase() < b[orderByValue].toString().toLowerCase()) { 
      return -1 * byVal; 
      } else if (a[orderByValue].toString().toLowerCase() > b[orderByValue].toString().toLowerCase()) { 
      return 1 * byVal; 
      } else { 
      return 0; 
      } 
     }); 
     return array; 
     } 
    } 
    } 
} 

Komponente

Ansicht für aufsteigend

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

Ansicht für absteigend

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'!id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 
+0

] Ich bin auf der Suche nach einer Methode, die ein Benutzer die Liste neu anordnen, aber wie er die Liste nach Priorität ändern möchte, kann ich dies mit Ihrem Vorschlag tun? – Joe

+0

Ja, Sie können, aber in diesem Fall müssen Sie das Objekt anstelle von id als Zeichenfolge übergeben und von dieser Zeichenfolge wird es den Namen der Objekteigenschaft zum Sortieren erhalten oder Sie können es tun, wie diese OrderBy: true == false? ' ID ':' NummerOfItems ' – rashfmnb

Verwandte Themen