angular.js, không thể chỉnh sửa tự động tạo ra các lĩnh vực

Question

Sử dụng angular.js, tôi có một danh sách động các trường biểu mẫu tôi muốn hiển thị cho người dùng để chỉnh sửa (và nộp sau):

var app = angular.module('app', []); 
app.controller('Ctrl', function($scope) { 
    $scope.fields = { 
     foo: "foo", 
     bar: "bar", 
     baz: "baz" 
    }; 
}); 

Và HTML:

<div ng-app="app" ng-controller="Ctrl"> 
    <table> 
     <th>key</th> 
     <th>value</th> 
     <th>fields[key]</th> 
     <tr ng-repeat="(key,value) in fields"> 
      <td>{{key}}:</td> 
      <td><input type="text" ng-model="value"/></td> 
      <td><input type="text" ng-model="fields[key]"/></td> 
     </tr> 
    </table> 
</div> 

Xem this fiddle. Vì lý do tôi không hiểu, các hộp nhập văn bản không thể chỉnh sửa được. Tôi đã thử hai cách khác nhau như được thấy ở trên: value và fields[key]. value hoàn toàn không thể chỉnh sửa được và fields[key] sẽ cho phép một phím tắt và sau đó nó sẽ làm mờ. Tôi đang làm gì sai? Cảm ơn bạn.

Answer 1

Có thể chỉnh sửa nhưng sau mỗi lần nhấn, trường văn bản của bạn sẽ mất tiêu điểm để bạn phải nhấp lại vào đó để đặt một char khác.

Và điều đó xảy ra vì toàn bộ mẫu của bạn được hiển thị lại sau mỗi thay đổi trong bất kỳ mô hình nào. Và sau khi mẫu được hiển thị lại, hiện tại không có cách nào để biết đầu vào nào cần được tập trung. Vì vậy, bạn nên tạo theo cách đó và bạn có thể muốn viết chỉ thị để giữ tiêu điểm trên đầu vào được chọn.

Answer 2

Bạn cần sử dụng một mảng đối tượng. Hy vọng rằng bạn có thể làm lại mô hình của mình:

$scope.fields = [ 
    {label: "foo", value: "foov"}, 
    {label: "bar", value: "barv"}, 
    {label: "baz", value: "bazv"} 
]; 

<tr ng-repeat="field in fields"> 
    <td>{{field.label}}:</td> 
    <td><input type="text" ng-model="field.value"> 

Fiddle.

Answer 3

SET đã trả lời lý do tại sao nó xảy ra, nhưng một công việc xung quanh để đạt được hành vi mong muốn sẽ là duy trì một mảng riêng biệt của các phím của bạn, và chạy ng-lặp lại các phím đó. Tôi đã thêm một số trường văn bản để thử nghiệm để thêm các thuộc tính khác vào $scope.fields

Bạn có thể sử dụng $ watch để tự động đặt khóa khi thuộc tính thay đổi, nếu yêu cầu của bạn là số lượng trường có thể thay đổi.

http://jsfiddle.net/aERwc/10/

đánh dấu

<div ng-app="app" ng-controller="Ctrl"> 
    <table> 
     <th>key</th> 
     <th>value</th> 
     <tr ng-repeat="key in fieldKeys"> 
      <td>{{key}}:</td> 
      <td><input type="text" ng-model="fields[key]"/></td> 
     </tr> 
    </table> 
    <div><h6>Add a field</h6> 
     key: <input type="text" ng-model="keyToAdd" /><br /> 
     value: <input type="text" ng-model="valueToAdd" /> 
     <button ng-click="addField()">Add Field</button> 
    </div> 
</div> 

khiển

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

app.controller('Ctrl', function($scope) { 
    $scope.fields = { 
     foo: "foo", 
     bar: "bar", 
     baz: "baz" 
    }; 
    $scope.fieldKeys = []; 

    $scope.setFieldKeys = function() { 
     var keys = []; 
     for (key in $scope.fields) { 
      keys.push(key); 
     } 
     $scope.fieldKeys = keys; 
    } 

    $scope.addField = function() { 
     $scope.fields[$scope.keyToAdd] = $scope.valueToAdd; 
     $scope.setFieldKeys(); 
     $scope.keyToAdd = ''; 
     $scope.valueToAdd = ''; 
    } 

    $scope.setFieldKeys(); 
});