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:
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With