Was ist der Verhaltensunterschied zwischen ng-repeat und statisch getipptem Code?

Question

Was ist der Unterschied zwischen dem HTML und dem dadurch erzeugten Verhalten? 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>

und dieser getippte 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>

Ich versuche, den ersten zu haben ng-repeat Der Code verhält sich genauso wie der zweite eingegebene Code, aber aus irgendeinem Grund bleiben die Schieberegler des ersten Codes hängen und lassen sich nicht reibungslos verschieben.Der Schieberegler des zweiten Codes gleitet jedoch reibungslos.Was ist der Unterschied, den ich nicht berücksichtige?Für Vorschläge wäre ich dankbar.

items Ist:

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

Answer 1

Ich denke, es könnte auf jeden Fall ein Problem sein. Damit es funktioniert, versuchen Sie, das Modell als Liste zu definieren:

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

wobei HTML ist:

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