2012-10-17 34 views
5

Tôi có cảm giác mình đang làm điều gì đó sai, nhưng hành vi này có vẻ kỳ quặc. Tôi tự động tạo một bảng dựa trên dữ liệu trong bộ điều khiển. Khi tôi nhập một ký tự một trong các ô trong bảng, nó sẽ ngay lập tức thay đổi tiêu điểm tới ô tiếp theo và thêm ký tự đó vào đó.Biến đổi tế bào bảng Angularjs

Tôi có ví dụ rất đơn giản để tái tạo vấn đề trong 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': '' 
    } 
    }; 
}​ 

gì đang gây ra hành vi kỳ lạ này?

Trả lời

4

Ok, tôi đã tìm thấy sự cố. Bài đăng này đã thêm một số sự rõ ràng.

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

khi ngRepeat unrolls nó sao chép nguyên thủy thành một phạm vi địa phương theo mục. Sau đó, ng-mô hình liên kết với nó. Khi bạn cập nhật mô hình, bạn đang cập nhật một bản sao chứ không phải bản gốc. nhưng khi bạn cập nhật bản gốc nó sẽ lặp lại bộ lặp để nhận ra rằng có gì đó đã thay đổi trong mảng các mục và sau đó tái tạo lại mô hình ng, có nghĩa là ti sao chép nó sang các mục. Do đó hành vi kỳ lạ nhưng nó được mong đợi.

Câu trả lời ngắn: không bao giờ lặp lại và nhập liên kết với nguyên thủy trong ngRepeat, vì bạn đang tạo bản sao giá trị thay vì tham chiếu và mọi bản cập nhật được ghi vào phạm vi cục bộ chứ không phải vị trí ban đầu.

và tôi cập nhật fiddle mà làm việc tại

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

Các vấn đề liên quan