[英]How to get index of selected option in Angular
我試圖讓所選擇的選項指標select
采用了棱角分明。 我正在使用 Angular (4) 和 Ionic 3。
我的模板如下所示:
<ion-select [(ngModel)]="obj.city">
<ion-option *ngFor="let city of cities; let i = index;"
[value]="city" [selected]="i == 0">
{{city.name}}
</ion-option>
</ion-select>
我希望在組件代碼中訪問所選城市的索引。 可以說,我希望將該索引分配給組件中的變量selectedCityIndex
。
我當前的代碼是預先選擇第一個選項作為默認值。 解決方案不應破壞此功能。
我正在尋找一種不包括數組交互的解決方案(即 JavaScript 部分沒有循環)。 它不應該使用“indexOf”方法或文檔的方法,如“document.getElementById”。 我沒有使用 jQuery。
如果你想在組件類文件中索引,請檢查這個 plnkr https://plnkr.co/edit/9Z7jjeSW7fmTUR7SbqNk?p=preview
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<h2>Select demo</h2>
<select (change)="onChange($event.target.value)" >
<option *ngFor="let c of cities;let i = index" [value]="i"> {{c.name}} </option>
</select>
`
})
class App {
public value:integer;
cities = [{'name': 'Pune'}, {'name': 'Mumbai'}, {'name': 'Nagar'}];
selectedCity = this.cities[1];
constructor() {
this.value = 0;
}
onChange(cityindex) {
console.log(cityindex);
alert(cityindex);
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
希望這可以幫助。
浪費了3個小時后,我找到了一個單行java腳本解決方案。
您可以使用event.target["selectedIndex"] - 1
來獲取 select 的selectedIndex
。
示例:
<select class="form-control selectpicker" #Code name="Code" [(ngModel)]="model.Code" (change)="searchWithCode($event)" >
<option value="" selected="selected">--Please select--</option>
<option *ngFor="let x of Codes" [value]="x.Code" [selected]="x.Code == model.Code">{{x.Name}}</option>
</select>
searchWithCode(event:Event) : void {
let index:number = use event.target["selectedIndex"] - 1;
}
參考: https : //github.com/angular/angular/issues/18842#issuecomment-324399823
使用 forEach 根據ngModel
存在的值進行迭代,如下所示,
this.cities.forEach((city,index) => {
if(city ==== obj.city){
selectedIndex= index;
}
})
使用(ngModelChange)
。 (ngModelChange) 事件偵聽器在選定值更改時發出事件。
@Component({
selector: 'my-app',
template: `
<h2>Select demo</h2>
<select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
</select>
`
})
class App {
cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
selectedCity = this.cities[1];
onChange(city) {
alert(city.name);
}
}
<ion-select [(ngModel)]="obj.city">
<ion-option *ngFor="let city of cities; let i = index" (ngModelChange)="onChange(i)" [value]="city">
{{city.name}}
</ion-option>
</ion-select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.