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），這很容易混淆。