AngularJS动态表单输入，带有通过ng-repeat的字段集

Question

请点击下面的演示

www.jsfiddle.net/rnnb32rm/1370

  

我的问题是：“添加输入”工作正常。但每当我调用“添加   字段“，后续字段将与第一个字段同步。我想要   随后只填充一个输入。已经坚持好几个小时了。请指导！

图片来说明：

Answer 1

可能会帮到你。

＆＃13;

＆＃13;

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);
    }
  
  });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在您第一次发布此问题时回答了此问题，但您将其删除了。

您只有一个<ListBox x:Name="ListBox_Movies" DataContext="{StaticResource MovieData}" ItemsSource="{Binding XPath=/Movies/Movie/@Name}"/> <DataGrid ItemsSource="{Binding ElementName=ListBox_Movies, Path=SelectedItem}"/> 数组，并且您一遍又一遍地使用它：

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），这会令人困惑。