Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-options not rendering values

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>
like image 567
Habib MAALEM Avatar asked Jan 20 '13 14:01

Habib MAALEM


People also ask

What is the difference between Ng-options and Ng-repeat?

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.

Why does AngularJS include an empty option in select?

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.

How do I set default selected value in ng-options?

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.

What are ng-model options?

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.


3 Answers

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/

like image 114
bmleite Avatar answered Oct 31 '22 11:10

bmleite


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.

like image 44
user2560550 Avatar answered Oct 31 '22 12:10

user2560550


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.

like image 2
wlingke Avatar answered Oct 31 '22 13:10

wlingke