2012-10-17 7 views
5

나는 뭔가 잘못하고있는 느낌이 들지만,이 동작은 이상하게 보입니다. 동적으로 컨트롤러의 데이터를 기반으로 테이블을 만듭니다. 테이블에있는 셀 중 하나의 문자를 입력하면 즉시 다음 셀로 포커스가 변경되고 거기에 문자가 추가됩니다.Angularjs 테이블 셀 반복

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

좋아, 문제가 발견되었습니다. 이 게시물은 약간의 명확성을 추가했습니다.

ngRepeat가 복사 항목 아래 로컬 범위로 프리미티브를 언 롤링

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

. 그런 다음 NG 모델이 바인딩됩니다. 모델을 업데이트하면 원본이 아닌 복사본이 업데이트됩니다. 원본을 업데이트하면 항목 배열에서 무엇인가가 변경되었다는 것을 깨닫고 중개자가 다시 작성되어 항목으로 다시 복사된다는 것을 알게됩니다. 따라서 이상한 행동이지만 예상됩니다.

짧은 대답 : ngRepeat의 프리미티브에 반복 및 입력 바인드하지 마십시오. 참조가 아닌 값의 복사본을 만드는 것이므로 업데이트는 원래 위치가 아닌 로컬 범위에 기록됩니다.

나는 지금

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

작동 바이올린 업데이트