Quelle est la différence de comportement entre ng-repeat et le code saisi statiquement ?

Question

Quelle est la différence entre le code HTML et le comportement produit par celui-ci 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>

et ce code tapé:

       <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>

J'essaie d'avoir le premier ng-repeat Le code a le même comportement que le deuxième code tapé, mais pour une raison quelconque, les curseurs du premier code restent collés et ne glissent pas facilement.Le curseur du deuxième code glisse cependant en douceur.Quelle est la différence dont je ne tiens pas compte ?Toute suggestion serait appréciée.

items est:

    {"science":0,"english":3,"math":4}

Answer 1

Je pense que cela pourrait être un problème, de toute façon, pour que cela fonctionne, essayez de définir le modèle sous forme de liste :

$scope.items = [{
    "name": "science",
    "value": "0"
}, {
    "name": "english",
    "value": "3"
}, {
    "name": "math",
    "value": "4"
}];

où HTML est :

<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>

Démo Violon