5

何か間違ったことをしているような気がしますが、この動作は奇妙に思えます。コントローラーのデータに基づいてテーブルを動的に作成します。テーブル内のセルの 1 つに文字を入力すると、すぐに次のセルにフォーカスが移動し、そこにも文字が追加されます。

jsfiddle で問題を再現する非常に単純な例があります。

http://jsfiddle.net/rgaskill/Aksec/15/

 <div ng-app="miniapp">
<div ng-controller="Matrix">
    <h1>Enter a value in the fist cell.</h1>
   <table>
<thead>
    <tr>
        <th>Row Name</th>
        <th>0</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="(row, values) in valueMap">
        <td>{{row}}</td>
        <td ng-repeat="(col, val) in values" ><input type="text" ng-model="valueMap[row][col]"></input></td>
    </tr>

</tbody>
</table>                      
</div>    
 </div>​

 var app = angular.module('miniapp', []);

 function Matrix($scope) {
$scope.valueMap = {
    aRow: {
        '0': '',
        '1': '',
        '2': '',
        '3': '',
        '4': '',
        '5': ''
    }
   };
 }​

この奇妙な動作の原因は何ですか?

4

1 に答える 1

4

わかりました、問題が見つかりました。この投稿は、いくつかの明確さを追加しました。

https://groups.google.com/forum/#!topic/angular/VD77QR1J6uQ/discussion

ngRepeatが展開されると、プリミティブがアイテムの下のローカルスコープにコピーされます。次に、ng-modelがそれにバインドします。モデルを更新すると、元のモデルではなく、コピーが更新されます。ただし、オリジナルを更新すると、リピーターはitems配列で何かが変更されたことを認識し、ng-modelを再作成します。つまり、tiはそれをitemsに再コピーします。したがって、奇妙な動作ですが、それは予想されます。

簡単な答え：参照ではなく値のコピーを作成し、更新は元の場所ではなくローカルスコープに書き込まれるため、ngRepeatのプリミティブに反復して入力バインドしないでください。

そして私は今動作するフィドルを更新しました

http://jsfiddle.net/rgaskill/Aksec/16/

于 2012-10-17T02:29:26.197 に答える