简体   繁体   中英

angular set option value as array iteration with ng-select

From the controller:

$scope.form_data = {
    day: 'Day'
};

$scope.days = [
    'Day',1,2,3,4,5,6,7,8,9,10,
    11,12,13,14,15,16,17,18,19,20,
    21,22,23,24,25,26,27,28,29,30,
    31
];

From the html:

<select ng-model="form_data.day" ng-options="day for day in days"></select>

The results is:

<select ng-options="day as day for day in days" ng-model="form_data.day" class="ng-pristine ng-valid ng-touched">
   <option value="string:Day" label="Day" selected="selected">Day</option>
   <option value="number:1" label="1">1</option>
   <option value="number:2" label="2">2</option>
....
</select>

Which is great.. but I cannot figure out from the docs how to set the value of the option as the array key, ie from the above example, the value of the first option i need to be 0, ie the first pos. in the array.

Is this possible with ng-options?

Yes it's possible, you were almost there.

See the first response of this post: Put an index to a model with ng-options for a simple array

Your select balise becomes:

<select 
        ng-model="form_data.day" 
        ng-options="days.indexOf(day) as day for day in days"></select>

I wrote an example : https://jsfiddle.net/w7jdktxn/1/

never did that, but that is what you asked !

        <div ng-init="days = [1,2,3,4,5]">
            <select ng-model="form_data.day" class="ng-pristine ng-valid ng-touched">
                <option value="" disabled selected style="display: none;">Select day</option>
                <option ng-repeat="day in days" value="{{$index}}" >{{day}}</option>
            </select>
            <h3>form_data.day={{form_data.day}}</h3>
        </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM