[英]load drop down values alphabetic order angular 6
我正在嘗試按字母順序加載下拉列表。 目前,我使用唯一值管道進行下拉。 我如何添加另一個管道以獲得字母順序。
<select class="form-control fix-dropdown" required
(change)="batchSorceList();"
[ngClass]="{'is-invalid':glheaderform.submitted && orgname.invalid}"
#orgname="ngModel" [(ngModel)]="orgNameModel.orgName"
name="orgName">
<option value="undefined" disabled="true">--Select--</option>
<option *ngFor="let bank of orgNameModel | unique ">{{bank.orgName}}</option>
</select>
作為Angular的最佳做法,您不應使用OrderPipe
如果要基於名稱對項目進行排序,請使用純javascript排序功能,如下所示
sortBy(prop: string) {
return this.orgNameModel.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
}
在您的HTML中
<option *ngFor="let bank of of filterBy('orgName')"| unique ">{{bank.orgName}}</option>
使用orderBy
對選擇框進行排序
<option *ngFor="let bank of orgNameModel | unique | orderBy : 'your column name' ">{{bank.orgName}}</option>
使用sort函數實現類似這樣的管道(請參見此處: https : //stackblitz.com/edit/angular-d17atb )-
@Pipe({name: 'sortBy'})
export class SortByPipe implements PipeTransform {
transform(value: any[]) : any[] {
value.sort(function(a,b){
let alc = a.toLowerCase(),
blc = b.toLowerCase();
return alc > blc ? 1 : alc < blc ? -1 : 0;
});
console.log(value);
return value;
}
}
和HTML將像-
<li *ngFor="let value of list | sortBy">{{value}}</li>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.