Menu
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>
567
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.
Use ng-init to set default value for ng-options . Save this answer. Show activity on this post. In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest.
The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.
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:
<option>'s label as limit.text
limit.value value into the select's ng-model
Check this fiddle: http://jsfiddle.net/bmleite/k58Hw/
114
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.
44
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
