1

ng-repeatHTML とこのコードによって生成される動作の違いは何ですか:

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

そして、これはコードを入力しました：

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

最初のコードを 2 番目に入力したコードと同じ動作にしようとしていng-repeatますが、何らかの理由で、最初のコードのスライダーが動かなくなり、スムーズにスライドしません。ただし、2 番目のコードのスライダーはスムーズにスライドします。私が説明していない違いは何ですか？任意の提案をいただければ幸いです。

itemsは：

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

1 に答える 1

1

とにかく、モデルをリストとして定義しようとすることは、私が思ういくつかの問題かもしれません:

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

ここで、HTML は次のとおりです。

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

デモFiddle

于 2013-11-16T19:32:26.800 に答える