AngularJS ng-options not rendering values

Question

How can I render the value of the following 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>

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 work, you (we) have to change the way we submit the data to the server.

The browser is "stupid", and it does not take care about AngularJS, 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 render correct values, or to submit data by calling the .post method from the AngularJS controller.

This is why I love & hate AngularJS.

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.

Answer 4

for an alternate approach, we can use ng-repeat

<select  ng-model="limit" id="limitType" class="ng-pristine ng-valid" >
 <option ng-repeat="option in limits " value="{{option.value}}" >
  {{option.text}}
 </option>
</select>