2013-03-30 30 views
9

Đây là một vấn đề lạ. Mã này rất đơn giản:Angular.JS: tại sao không thể chỉnh sửa đầu vào?

HTML code:

<body ng-controller="MainCtrl"> 
    <ul ng-repeat="name in names"> 
    <input type="text" ng-model="name" /> 
    </ul> 
</body> 

đang kiễu góc:

app.controller('MainCtrl', function($scope) { 
    $scope.names = ["aaa","bbb","ccc"]; 
}); 

Url demo sống là: http://plnkr.co/edit/2QFgRooeFUTgJOo223k9?p=preview

Tôi không hiểu tại sao các điều khiển đầu vào có thể không được chỉnh sửa, tôi không thể nhập các ký tự mới hoặc xóa các ký tự.

Trả lời

9

Đây là vấn đề phổ biến do thừa kế phạm vi. Mỗi names của bạn là một nguyên thủy để ng-repeat làm cho nó của mục phạm vi riêng mà không được kết nối với bản gốc, tuy nhiên nếu mỗi names là một phạm vi mục đối tượng ng-repeat sẽ là một tham chiếu đến đối tượng gốc

[{name:"aaa"},{name:"bbb"},{name:"ccc"}]; 

Luôn luôn sử dụng một dot trong ng-model là một quy tắc nhỏ có ích

<div ng-repeat="item in names"> 
     <input type="text" ng-model="item.name"/> 
    </div> 

Working Plunker

đọc bài viết này trên gith góc ub wiki cho explanaton chi tiết:

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

3

góc 'cố định' này trong 1.1 với các ca khúc bằng $ index. Không cần phải thay đổi mô hình của bạn.

<div ng-repeat="item in names track by $index"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 

Plunker here

0

Cuối câu trả lời, nhưng bạn cũng nên cẩn thận với lỗi chính tả, mà góc sẽ không cảnh báo bạn về:

<div ng-repeat="item in names track by $index" ng=if="names[$index] = 'John'"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 

Note equals duy nhất trong ng-nếu, mà sẽ không gây ra cảnh báo hoặc lỗi, nhưng văn bản cũng sẽ chỉ đọc. Khá khó để phát hiện nếu bạn đọc nhanh.

Nó tất nhiên nên là:

<div ng-repeat="item in names track by $index" ng-if="names[$index] == 'John'"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 
+0

chỉnh của bạn thiếu sự điều chỉnh. =] – sonicblis

+0

@sonicblis vị trí tốt, được sửa chữa! – PeterS

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