字母排序下拉

我剛開始使用Angular 2和TypeScript。我很難爲它實現代碼。我的問題是如何在我的下拉列表中做排序選項？字母排序下拉

下面是HTML代碼：

<div class="col-12"> 
    <select class="form-control" id="type" [(ngModel)]="measure" (change)="getMeasures()"> 
     <option *ngFor="let option of options" [ngValue]="option.measure">{{option.display}}</option> 
     </select> 
    </div>

這裏是我的打字稿供選的部分：

options = [ 
     { 
      measure: 'length', 
      display: 'Length' 
     }, 
     { 
      measure: 'area', 
      display: 'Area' 
     }, 
     { 
      measure: 'volume', 
      display: 'volume' 
     }, 
     { 
      measure: 'time', 
      display: 'Time' 
     }, 
     { 
      measure: 'current', 
      display: 'Current' 
     }, 
     { 
      measure: 'energy', 
      display: 'Energy' 
     }, 

    ]

來源

2017-06-21 pooh098

澄清你的問題，你所面臨的問題。你想排序哪個度量？ – Abrar

@Abrar當我點擊下拉菜單時，我想對它們進行排序，以便它們在我的列表中以aphabetical順序排列。所以首先將區域當前等。 – pooh098

@ pooh098你檢查我的鼻子 – Sajeetharan

您可以使用angular2的管道，說orderBy，

<div class="col-12"> 
    <select class="form-control" id="type" [(ngModel)]="measure" (change)="getMeasures()"> 
     <option *ngFor="let option of options | orderBy : 'measure'" [ngValue]="option.measure">{{option.display}}</option> 
     </select> 
    </div>

DEMO

來源

2017-06-21 18:25:26 Sajeetharan

downvote？以什麼方式 – Sajeetharan

排序管施加看到https://angular.io/guide/pipes

<option *ngFor="let option of options | orderBy:'measure'" [ngValue]="option.measure">{{option.display}}</option>

來源

2017-06-21 19:09:25

字母排序下拉

回答

相關問題