CODEWITHSUNDEEP
javascripthtmlangularjs
usumoio
usumoio

Reputation: 3568

Applying an ID to a select build by AngularJS

Okay, so I built a select input as followed:

<select 
    id='change-connect-week-in-manage-panel-dropdown' 
    ng-change='changeConnectEditing()' class="form-control" 
    ng-model="connectData.connectId" 
    ng-options="opt.id as opt.name for opt in connectData.connects"
>
</select>

This builds the following:

<select 
    id="change-connect-week-in-manage-panel-dropdown" 
    ng-change="changeConnectEditing()" 
    class="form-control ng-valid ng-dirty ng-valid-parse ng-touched"   
    ng-model="connectData.connectId" 
    ng-options="opt.id as opt.name for opt in connectData.connects"
>
    <option value="0" selected="selected">Week 15</option>
    <option value="1">Week 14</option>   
    <option value="2">Week 13</option>
    <option value="3">Week 12</option>
    <option value="4">Week 11</option>
</select>

I want to create this (Note the id attribute now on each option tag):

    <select 
    id="change-connect-week-in-manage-panel-dropdown" 
    ng-change="changeConnectEditing()" 
    class="form-control ng-valid ng-dirty ng-valid-parse ng-touched"   
    ng-model="connectData.connectId" 
    ng-options="opt.id as opt.name for opt in connectData.connects"
>
    <option id="1" value="0" selected="selected">Week 15</option>
    <option id="2" value="1">Week 14</option>   
    <option id="3" value="2">Week 13</option>
    <option id="4" value="3">Week 12</option>
    <option id="5" value="4">Week 11</option>
</select>

I've tried ng-options="opt.id as opt.name for opt in connectData.connects track by opt.id" but I can't figure out how to apply an id like you usually can with {{$index}} I'm not sure what else can be done. Thanks.

Upvotes: 1

Views: 46

Answers (1)

Bikas
Bikas

Reputation: 2759

Use ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) instead. ng-options will not allow you to add custom property to options.

Upvotes: 2

Related Questions