Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

angularjs

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.

like image 590
JensB Avatar asked Jun 13 '16 13:06

JensB


1 Answers

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

like image 145
Deep Avatar answered Sep 23 '22 11:09

Deep