What is the difference in behavior between ng-repeat and statically typed out code?
-
21-12-2019 - |
Question
What is the difference between the html and the behavior produced by this ng-repeat
code:
<div id="settings-row-{{key}}" class='settings-row' ng-repeat="(key, value) in items">
<div id='settings-source-{{key}}' class='settings-source settings-column'>{{key}}</div>
<div class='settings-slider settings-column'>
<input type="range" ng-model="items[key]" min="0" max="4" />
</div>
</div>
and this typed out code:
<div id="settings-row-science" class='settings-row'>
<div id='settings-source-science' class='settings-source settings-column'>science</div>
<div class='settings-slider settings-column'>
<input type="range" ng-model="items['science']" min="0" max="4" />
</div>
</div>
<div id="settings-row-english" class='settings-row'>
<div id='settings-source-english' class='settings-source settings-column'>english</div>
<div class='settings-slider settings-column'>
<input type="range" ng-model="items['english']" min="0" max="4" />
</div>
</div>
<div id="settings-row-math" class='settings-row'>
<div id='settings-source-math' class='settings-source settings-column'>math</div>
<div class='settings-slider settings-column'>
<input type="range" ng-model="items['math']" min="0" max="4" />
</div>
</div>
I am trying to have the first ng-repeat
code have the same behavior as the second typed out code, but for some reason, the first code's sliders stick and won't slide smoothly. The second code's slider slide smoothly however. What is the difference I am not accounting for? Any suggestions would be appreciated.
items
is:
{"science":0,"english":3,"math":4}
Solution
It might be some issue I think, anyways, to make it work try to define model as list:
$scope.items = [{
"name": "science",
"value": "0"
}, {
"name": "english",
"value": "3"
}, {
"name": "math",
"value": "4"
}];
where HTML is:
<div ng-controller="fessCntrl">
<div id="settings-row-{{item.name}}" class='settings-row' ng-repeat="item in items">
<div id='settings-source-{{item.name}}' class='settings-source settings-column'>{{item.name}}</div>
<div class='settings-slider settings-column'>
<input ng-model="item.value" type="range" min="0" max="4" />
</div>
</div> <pre>{{items|json}}</pre>
</div>
Demo Fiddle
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow