How to bind a model to an option's value

In Angular 1.2.11, given a controller with:

$scope.produce = { 'apples' : [{ 'variety' : 'granny smith', 'price': 2.00}] }

And a view with

<select ng-model='fruits'>
  <option value="0">More Fruits...</option>
  <option ng-repeat=" for p in produce" value="p">{{ p.variety }}</option>

How can I bind 'p' to the value attribute? If I try as above the model is bound as a JSON string, not as the model itself (as it would be if I were able to use ng-options).

I'm working around this now by using an ng-change function that uses the value bound to fruits as a lookup in $scope.produce, but this seems like a workaround rather than a solution.

EDIT: Sorry I wasn't more clear about this: I need to be able to hard code 1+ options into the select list, so using ng-options is not a solution.

Here are some fiddles to help illustrate my problem:

** Using ng-options ** ng-options allows for one element that it uses for creating a default option for use as a label. Two problems with this: if I try to use that <option> for its intended purpose I can't add a second option to the select. On the other hand, if I just try to add one <option> element, it gets placed at the top of the <select> list. No good.

** Using ng-repeat ** I'm unable to bind the model to the value attribute of the <option> element. Instead, the value is stringified JSON, which is not bindable.


You need to use ng-options:

<select ng-model='fruits' ng-options="thisFruit.variety in apples">

If you need to have an option selected as a default (your "More Fruits" option) then you need to add that to the data before it gets to the repeater, and also set your model $scope.fruits = 0 to make that selection selected by default.

Need Your Help

how to do failover on windows server

windows glassfish high-availability failover

We have 2 pc's with Windows Server 2008 R2. Both pc's have glassfish installed with a web application. The first pc (PDC) has the ip, the second pc (BDC) has the ip and the ...