AngularJS – Dynamically add and remove form fields within a table


I wanna add a couple of form fields, dynamically on a button press and all that fields to be in a table (every field to have his own space something like this: <td>field</td>

This is what I have until now and if I put all the code in the table it doesn’t work.


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


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.removeChoice = function() {
    var lastItem = $scope.choices.length-1;

Here is a link to JSFiddle:


I added table data to your example and i think it works fine?

The only thing you really have to do is replace your fieldset with a tr node and then wrap your inputs in td nodes – and wrap the whole thing in a table node ofcourse.

Answered By – Per Hornshøj-Schierbeck

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published