AngularJS ng-options not rendering values

Question

AngularJS ng-options not rendering values

How can figured out how i can render the value of options list,

$scope.limits = [   {value: '5', text: 'Afficher 5 par page'}, 
                        {value: '10', text: 'Afficher 10 par page'}, 
                        {value: '15', text: 'Afficher 15 par page'}, 
                        {value: '20', text: 'Afficher 20 par page'}
                     ];


<select id="limitType" name="limit" ng-model="limit" ng-options="limit.value as limit.text for limit in limits"></select> enregistrement par page

Expected result (expecting in value="limit.value":

<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
    <option value="5" selected="selected">Afficher 5 par page</option>
    <option value="10">Afficher 10 par page</option>
    <option value="15">Afficher 15 par page</option>
    <option value="20">Afficher 20 par page</option>
</select>

Result:

<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
    <option value="0" selected="selected">Afficher 5 par page</option>
    <option value="1">Afficher 10 par page</option>
    <option value="2">Afficher 15 par page</option>
    <option value="3">Afficher 20 par page</option>
</select>

javascript
html
json
angularjs

Answer 1

The ng-options directive does not set the value attribute on the <options> elements, it always uses a sequence.

Using limit.value as limit.text for limit in limits means:

set the <option>'s label as limit.text
save the limit.value value into the select's ng-model

Check this fiddle: http://jsfiddle.net/bmleite/k58Hw/

Answer 2

To make it working, you (we) have to change the way we submit the data to the server. Browser is "stupid" and it does not take care about Angular, JQuery or any other JavaScript framework doing magic in the code behind. If the option contains index value instead of real value, the browser will send the index value to the server.

If you want to make it work, you either have to use ng-repeat in conjunction with option tag to dender correct values, or to submit data by calling .post method from the angular controller.

This is why i love & hate angular.

Answer 3

I realize this is an old question but I had an issue with this too. My simple solution to this was to create a hidden input and bind it using ngModel with the select. Then when you do normal form submit, submit the hidden input. Hope this helps.