AngularJS - 創建和檢索動態創建的表單

Question

我有一個表單，具有'屬性'部分。用戶可以根據他/她想要添加儘可能多的屬性：

HTML：

<h4> 
    Attributes: 
    <input type="button" value="+" id="new_obj_att_add" ng-click="addNewChoice()"> 
</h4> 
<div class="form-group" ng-repeat="attribute in attributes"> 
    <input type="text" ng-model="att_name" placeholder="Attribute Name"> 
    <input type="text" ng-model="att_value" placeholder="Attribute Value"> 
    <hr> 
</div> 

JS：

$scope.attributes = [{id: 1}]; 
    $scope.addNewChoice = function() { 
    var newItemNo = $scope.attributes.length+1; 
    $scope.attributes.push({'id': newItemNo}); 
}; 

現在，該代碼奇妙的作品爲動態增長的形式。但是，我需要將表單數據傳回我的控制器。正如你所看到的，每個屬性都會有相同的ng模型，所以我不能從那裏獲取它。

1）有沒有一種方法可以使用每個屬性的ID（即attr_name_1，attr_name_2）動態分配ng模型名稱，然後在我的AngularJS公式中循環這些元素並收集這些值？

2）如果我要在AngularJS中再次引用它們，我是不是以正確的方式創建這些元素？

在此先感謝您的幫助！

Answer 1

你必須把它分配給在ng-repeat模型：

<div class="form-group" ng-repeat="attribute in attributes"> 
    <input type="text" ng-model="attribute.att_name" placeholder="Attribute Name"> 
    <input type="text" ng-model="attribute.att_value" placeholder="Attribute Value"> 
    <hr> 
</div> 

隨後這些值將自動分配到正確的模型attributes收藏。