AngularJS - 动态添加和删除表格内的表格字段

Question

我想添加几个表单字段，动态地按下按钮和所有字段在表格中（每个字段都有自己的空间，如下所示：<td>field</td>

这是我到现在为止，如果我把所有的代码表中这是行不通的。

HTML

<div ng-app="angularjs-starter" ng-controller="MainCtrl"> 
    <fieldset data-ng-repeat="choice in choices"> 
     <select> 
     <option>option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
     </select> 
     <input type="text" ng-model="choice.name" name="" placeholder="Enter data"> 
     <input type="text" ng-model="choice.name" name="" placeholder="Enter data 2"> 
     <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
    </fieldset> 
    <button class="addfields" ng-click="addNewChoice()">Add fields</button> 

    <div id="choicesDisplay"> 
     {{ choices }} 
    </div> 
</div> 

JS

var app = angular.module('angularjs-starter', []); 

    app.controller('MainCtrl', function($scope) { 

    $scope.choices = [{id: 'choice1'}, {id: 'choice2'}]; 

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

    $scope.removeChoice = function() { 
    var lastItem = $scope.choices.length-1; 
    $scope.choices.splice(lastItem); 
    }; 

}); 

这里是一个链接的jsfiddle： http://jsfiddle.net/rnnb32rm/1014/

Answer 1

我添加的表格数据，你的榜样，我认为它工作正常？

你真的需要做的唯一事情是你fieldset与tr节点取代，然后包裹在td节点的输入 - 和包住整个事情的table节点ofcourse。

http://jsfiddle.net/9tk0qpng/1/