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.

Improve this question
3
  • 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 Commented Apr 27, 2014 at 7:52
  • Thank you so much. Exactly what I need. Please re-post your comment as reply. I will accept it. Commented Apr 27, 2014 at 8:12
  • Do you want the entire object of the selected option or only the string value? Commented Apr 27, 2014 at 8:29

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

6 Comments

Please see me above. selectedValue is always a string. This is how api works and I don't have an ability to alter it. It returns just the name of the selected option e.g. "string 2" and the list of options.
defaults is a object or array ?
Defaults is an object.
is defaults rendering select box ?
Yes, exactly. I admit this may be weird enough and may be api will be changed later (i'm not responsive for it),but for now it should work this way.
|
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.

Improve this answer

2 Comments

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.
@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
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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.