AngularJS: ng-mô hình bên trong ng-lặp lại?

Question

Tôi đang cố tạo các đầu vào biểu mẫu bằng ng-repeat. Lưu ý: 'customFields' là một mảng các tên trường: ["Age", "Weight", "Ethnicity"].

<div class="control-group" ng-repeat="field in customFields"> 
    <label class="control-label">{{field}}</label> 
    <div class="controls"> 
     <input type="text" ng-model="person.customfields.{{field}}" /> 
    </div> 
</div> 

Cách tốt nhất/đúng để đặt 'ng-model' là gì? Tôi muốn gửi cho máy chủ dưới dạng person.customfields.'fieldname ' nơi tên trường đến từ' trường trong customFields '.

Answer 1

<div ng-app ng-controller="Ctrl"> 
    <div class="control-group" ng-repeat="field in customFields"> 
     <label class="control-label">{{field}}</label> 
     <div class="controls"> 
      <input type="text" ng-model="person.customfields[field]" /> 
     </div> 
    </div> 
    <button ng-click="collectData()">Collect</button> 
</div> 

function Ctrl($scope) { 
    $scope.customFields = ["Age", "Weight", "Ethnicity"]; 
    $scope.person = { 
     customfields: { 
      "Age": 0, 
       "Weight": 0, 
       "Ethnicity": 0 
     } 
    }; 

    $scope.collectData = function() { 
     console.log($scope.person.customfields); 
    } 
} 

Bạn có thể thử nó here.

Cập nhật:

Đối với xác nhận, thủ đoạn này là đưa <ng-form> bên trong repeater. Vui lòng try.

Answer 2

Nó nên là:

<input type="text" ng-model="person.customfields[field]" /> 

Answer 3

Hãy thử điều này ng mô hình = "person.customfields." {{}} Lĩnh vực Moved các dấu ngoặc kép

Answer 4

Bất kỳ ai kết thúc ở đây Đối với ng-model bên ng-repeat

http://jsfiddle.net/sirhc/z9cGm/

liên kết ở trên có mô tả tốt về cách sử dụng nó với các ví dụ