CODEWITHSUNDEEP
angular
Marco Jr
Marco Jr

Reputation: 6806

Angular 2 RC1 - Setting default option on select

all ! I've this...

    <select #sel [(ngModel)]="sort">
        <option *ngFor="let xOptions of sortOptions">{{xOptions}}   </option>
    </select>

with this code:

sortOptions = ["Op1", "Op2"];

How to set the default to Op2 ?

It's not working: this.sort = "Op2"; I saw some docs that's says to set the model. Maybe something changed in RC1 ? ty !

Upvotes: 1

Views: 1655

Answers (3)

Mark Rajcok
Mark Rajcok

Reputation: 364747

Since sortOptions is an array of primitive values, you can bind to the value property of each option element:

<select [(ngModel)]="sort">
  <option [value]="sortOption" *ngFor="let sortOption of sortOptions">{{xOptions}}</option>
</select>

export class MyComponent {
  sortOptions = ["Op1", "Op2"];
  sort = "Opt2";   // or,  sort = this.sortOptions[1];
  ...
}

If sortOptions contained an array of objects, then use ngValue to bind each object to each option element, as @yurzui shows in his answer.

Upvotes: 1

Quốc Hồ Thanh
Quốc Hồ Thanh

Reputation: 35

you can use ng-model if you binding data into drop down list from @model. Or can use ng-selected

Upvotes: -1

yurzui
yurzui

Reputation: 214315

Since 2.0.0-beta.14 an object can be bound to using ngValue (https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta14-2016-04-07), so try to add [ngValue]="xOptions" like this:

<select [(ngModel)]="sort">
  <option *ngFor="let xOptions of sortOptions" [ngValue]="xOptions">{{xOptions}}</option>
</select>

See also plunker https://plnkr.co/edit/vLSiuQKQNbwFkIQ70j81?p=preview

Upvotes: 2

Related Questions