AngularJS - Dynamically add and remove form fields within a table

Question

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.

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

Here is a link to JSFiddle: https://jsfiddle.net/rnnb32rm/1014/

What is it that is not working? I am able to add fields to table — Sandeep Nayak
– Sandeep Nayak, Commented Jan 11, 2017 at 8:46
@SandeepNayak i wanna every field to by in a table something like this: <tr><td> <input type="text" ng-model="choice.name" name="" placeholder="Enter data"></td> <td> <input type="text" ng-model="choice.name" name="" placeholder="Enter data"></td> <td> <input type="text" ng-model="choice.name" name="" placeholder="Enter data"></td> — Gallo
– Gallo, Commented Jan 11, 2017 at 8:50

Syscall · Accepted Answer · 2021-04-04 15:55:42Z

1

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.

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

edited Apr 4, 2021 at 15:55

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jan 11, 2017 at 9:28

Per Hornshøj-Schierbeck

15.2k21 gold badges84 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Dynamically add and remove form fields within a table

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related