5

I have data such as this:

"RequirementLevels": {
 "285960000":"Black",
 "285960001":"Green",
 "285960002":"Blue",
 "285960003":"Purple"
}

And I have a Select like this:

<select ng-options="key as value for (key , value) in Variables.Template.RequirementLevels"
        ng-model="Variables.EditingNode.RequirementLevel"
        ng-model-options="{ debounce: 300 }"></select>
<span>"{{Variables.EditingNode.RequirementLevel}}"</span>

This produces the following html: enter image description here

Note the string: in front of each value in the select options. Using the below code I do not get the string: in the value.

<select ng-model="Variables.EditingNode.RequirementLevel">
     <option ng-repeat="(key, value) in Variables.Template.RequirementLevels" value="{{key}}">{{value}}</option>
</select>

My question is why am I getting the string: in the ng-option list and how do I make it go away.

Update because of comments: The reason I want to change this is because the ng-model value is not working when the value has string: in it. I assume this is because it does not match "string:123" in the option set with "123" from the model.

Update 2

This is the Html that creates the select.

<div class="form-group input-group">
    <label for="ReviewDone">Requirement level</label>
    <select ng-options="key as value for (key , value) in Variables.Template.RequirementLevels track by key"
            ng-model="Variables.EditingNode.RequirementLevel"
            ng-model-options="{ debounce: 300 }"></select>
    <span>"{{Variables.EditingNode.RequirementLevel}}"</span>
</div>

This creates the select with the options but does not select a default value. The span just below it that show the contents of the ng-model variable however works fine and prints the number "285960002" which is in the list of options, so it should be selected from the list to start with.

The above code generates this HTML:

<div class="form-group input-group">
    <label for="ReviewDone">Requirement level</label>
    <select class="ng-pristine ng-untouched ng-valid" ng-model="Variables.EditingNode.RequirementLevel" ng-model-options="{ debounce: 300 }" ng-options="key as value for (key , value) in Variables.Template.RequirementLevels track by key"><option selected="selected" value="?"></option><option value="285960000" label="Black">Black</option><option value="285960001" label="Green">Green</option><option value="285960002" label="Blue">Blue</option><option value="285960003" label="Purple">Purple</option></select>
    <span class="ng-binding">"285960002"</span>
</div>

Also selecting a different value in the select changes the value in the span, so it is updating the value but not reading it when it loads.

16
  • stackoverflow.com/questions/37706606/… Commented Jun 13, 2016 at 13:49
  • 1
    The values you are seeing are the hash key for the item. This is normal behavior for angular ng-options, and your application logic shouldn't be affected, since it doesn't change the value returned to ng-model. Commented Jun 13, 2016 at 13:51
  • @Claies: See update on question: I beleive the ng-model value is not working correctly with the string part present. Commented Jun 13, 2016 at 13:55
  • 1
    @Claies Hmm I might be wrong about that though as when im inspecting the variables after changing the drop down it is correct, but it wont set the dropdown to a value from the start, even though the variable assigned by ng-model clearly has a value matching to an option. Commented Jun 13, 2016 at 14:00
  • 1
    updated plunker, showing setting a default value: plnkr.co/edit/zDlwdHUTQU4q18PX0PF7?p=preview Commented Jun 13, 2016 at 14:04

1 Answer 1

5

if you want to make this additional string go away as you asked then use track by key.

<select ng-options="key as value for (key , value) in Variables.Template.RequirementLevels track by key"

See the plunker for reference

http://plnkr.co/edit/fi8lLyjkS0y3hfX7aeNI?p=preview

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

3 Comments

you probably want to track by key, not value; track by value causes the dropdown to blank out the selection.
@Claies Aye, I tried track by key and it did remove the string:, but the problem I wanted to fix is still there as you said it would be.
what is the problem ?? thanks @Claies for pointing out that i have corrected that in post.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.