CODEWITHSUNDEEP
angularjsionic-frameworkionic2
Devil Raily
Devil Raily

Reputation: 562

ng-selected expression not selecting when true

When the index of the accommodation is 0 then add the selected attribute to the option. I am not sure what I am doing wrong.

The following is the code I am working with

<select formControlName="type" required>
   <option value="{{ accommodation.id }}" *ngFor="let accommodation of ListAccommodationTypes; let i = index;" ng-selected="0 in i">{{ accommodation.name }}</option>
</select>

This is what it renders in the DOM

<select formcontrolname="type" required="" ng-reflect-name="type" class="ng-untouched ng-pristine ng-invalid">
   <!--template bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object]"
      }-->
   <option ng-selected="0 in i" value="4" ng-reflect-value="4">Something 4</option>
   <option ng-selected="0 in i" value="5" ng-reflect-value="5">Something 5</option>
   <option ng-selected="0 in i" value="3" ng-reflect-value="3">Something 3</option>
   <option ng-selected="0 in i" value="2" ng-reflect-value="2">Something 2</option>
   <option ng-selected="0 in i" value="1" ng-reflect-value="1">Something 1</option>
</select>

I have also tried

<select formControlName="type" required>
   <option value="{{ accommodation.id }}" *ngFor="let accommodation of ListAccommodationTypes; let i = index;" ng-selected="i==0">{{ accommodation.name }}</option>
</select>

<select formControlName="type" required>
   <option value="{{ accommodation.id }}" *ngFor="let accommodation of ListAccommodationTypes; let i = index;" ng-selected="{{i==0}}">{{ accommodation.name }}</option>
</select>

Upvotes: 0

Views: 302

Answers (1)

digit
digit

Reputation: 4565

Try this

<option *ngFor="let accommodation of ListAccommodationTypes; let i = index;"
    [attr.selected]="i == 0 ? true : null">
  {{ accommodation.name }}
</option>

Upvotes: 1

Related Questions