AngularJS动态表单输入

Question

，请点击下面的演示

www.jsfiddle.net/rnnb32rm/1370

我的问题是：“添加输入”工作正常。但是每当我调用“添加 字段”时，后续字段将与第一个字段同步。我想 后来只填写一个输入。已经停留数小时了。请指导！

图片说明：

Answer 1

可能帮助你。

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

 
app.controller("MyCtrl" , function($scope){ 
 
    
 
    $scope.data ={ 
 
     items:[{ name:"",family:"",age:""}] 
 
    }; 
 
    
 
    $scope.addRow = function(index){ 
 
    var item = { name:"",family:"",age:""}; 
 
     if($scope.data.items.length <= index+1){ 
 
      $scope.data.items.splice(index+1,0,item); 
 
     } 
 
    }; 
 
    
 
    $scope.deleteRow = function($event,item){ 
 
    var index = $scope.data.items.indexOf(item); 
 
    if($event.which == 1) 
 
     $scope.data.items.splice(index,1); 
 
    } 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MyCtrl"> 
 
    <table> 
 
    <tr ng-repeat="name in data.items track by $index"> 
 
     <td> <input type="text" ng-model="data.items[$index].name"></td> 
 
     <td> <input type="text" ng-model="data.items[$index].family"></td> 
 
      <td> <input type="text" ng-model="data.items[$index].age"></td> 
 
     <td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td> 
 
     <td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td> 
 
    </tr> 
 
    </table> 
 
    <span>{{data|json}}</span> 
 
</div>

Answer 2

我这个回答你第一次张贴了这个问题，但你删除它。

你只有一个choices阵列，并且您反复使用它：

$scope.addNewChoice = function() { 
    // ... 
    // Same array each time 
    $scope.choices.push({'id':'choice'+newItemNo}); 
}; 

<fieldset data-ng-repeat="choice in choices2"> 
    <div data-ng-repeat="choice in choices "> <!-- Same array each time --> 

你可能想为choices2数组中的每一个条目的数组。

另外，两个ng-repeat元素都使用相同的变量名称（choice），这很容易混淆。