3

I have the following object:

defaults = {
0 : {
    id : 10,
    value : "string 1"
    },
1 : {
    id : 22,
    value : "string 2"
    }
}

I want to iterate over this object and display it as a select box.

<select ng-model="selectedValue" ng-options="obj.id as obj.value for obj in defaults">
   <option value="">---Select option-----</option>
</select>

What I'm trying to achieve is to select 'string 2' by default. But it does not work. The problem I have is the fact the selectedValue is a string:

$scope.selectedValue = "string 2";

From what I learned from the documentation the selectedValue must be the same object. But unfortunately, it is not possible. In my case selectedValue must be a string. In other words I need to operate with the name of the option only, I don't care about id. I tried to use ng-repeat. It even works but displays an empty option and I don't think using ng-repeat is a good way to do it.

Any advice will be appreciated greatly.

Sray
  • 665
  • 4
  • 13
  • 25
  • If you want the selectedValue to contain the value, and not the ID, then you should not use `obj.id as obj.value`, but `obj.value as obj.value` – JB Nizet Apr 27 '14 at 07:52
  • Thank you so much. Exactly what I need. Please re-post your comment as reply. I will accept it. – Sray Apr 27 '14 at 08:12
  • Do you want the entire object of the selected option or only the string value? – tasseKATT Apr 27 '14 at 08:29

4 Answers4

2

Selected value should be id;

 $scope.selectedValue = 22;

See Demo

EDIT:

change template

 <select ng-model="selectedValue" >
   <option value="">---Select option-----</option>
   <option ng-selected="selectedValue == obj.value" value="{{obj.value}}" ng-repeat="obj in defaults">{{obj.value}}</option>
 </select>

see Updated Demo

Nitish Kumar
  • 4,850
  • 3
  • 20
  • 38
2

If you want the selectedValue variable to contain the value, and not the ID, then you should not use obj.id as obj.value, but obj.value as obj.value.

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
0

I think you misinterpreted the documentation.

Selected value should refer to a value of the same object, not be an object itself.

Thus, you can set the default value as :

$scope.selectedValue = $scope.defaults[1].value;

That way, the default value will be set - it does not matter if the value is a string or a number.

callmekatootie
  • 10,989
  • 15
  • 69
  • 104
  • Please see my comments to the reply above. I cannot set selectedValue. selectedValue is _always_ a string returned by API. defaults is an object returned by ip. So, the comparision must be done by the value, not by id. – Sray Apr 27 '14 at 08:08
  • @user3174320 The default value does not work that way. What you will have to do is, once the API returns the string, loop through the `default` object's properties and when the value matches, assign that property value to `selectedValue`. Don't attach the value returned by the API directly to `selectedValue` – callmekatootie Apr 27 '14 at 08:11
0

If you are using ng-repeat with options you need to use on-last-repeat on your options tag. For example select name="repeatSelect" id="repeatSelect" ng-model="usertypes.SelectedId"

option ng-repeat="option in usertypes.AvailableOptions" value="{{option.Id}}" ng-selected="option.Id === usertypes.SelectedId" on-last-repeat>{{option.Name}}

select