CODEWITHSUNDEEP
angularjs
JensB
JensB

Reputation: 6880

ng-options adding "string:" in value and not updating ng-model

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.

Upvotes: 5

Views: 5637

Answers (1)

Deep
Deep

Reputation: 9794

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

Upvotes: 5

Related Questions