AngularJS - Dynamische Hinzufügen und Entfernen von Formularfeldern innerhalb einer Tabelle

Question

Ich möchte ein paar Formularfelder hinzufügen, dynamisch auf einen Knopf drücken und alle Felder in einer Tabelle (jedes Feld, um seinen eigenen Platz so etwas zu haben: <td>field</td>

Dies ist, was ich bis jetzt haben, und wenn ich in der Tabelle den gesamten Code setzen funktioniert es nicht.

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

}); 

Hier ist ein Link zu jsfiddle: http://jsfiddle.net/rnnb32rm/1014/

Answer 1

I Tabellendaten zu Ihrem Beispiel gegeben und ich denke, es funktioniert gut?

Das einzige, was Sie wirklich tun müssen, ist Ihre fieldset mit einem tr Knoten ersetzen und dann Ihre Eingaben in td Knoten wickeln - und das Ganze in einem table Knoten ofcourse wickeln.

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