adding a textbox element dynamically to a form by AngularJS

Question

How can we add a textbox element to a form dynamically using AngularJs. For example in this case, I have a text and textbox which I want to add one other of this pair by clicking on a button using AngularJs.

<div ng-app>
<div ng-controller="ClickToEditCtrl">
    <div ng-hide="editorEnabled" ng-click="editorEnabled=true">
        {{title}}
    </div>
    <div ng-show="editorEnabled">
        <input ng-model="title">
        <button href="#" ng-click="editorEnabled=false">Done editing</button>
    </div>
</div>
</div>
<div>
<input type="text" placeholder="Enter answer">
</div>

Ark · Accepted Answer · 2014-03-02 03:32:39Z

9

I implemented it myself. You could dynamically add an element by using ng-repeat in a

<li ng-repeat="elemnt in questionelemnt">

Here it is the Demo: fiddle

answered Mar 2, 2014 at 3:32

Ark

4571 gold badge8 silver badges18 bronze badges

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

2 Comments

krunal.cp Over a year ago

Is there any way to see the unique ID for the generated fields? Because I am working on the similar things but I can't see one.

Vishwa Ratna Over a year ago

where do i put the js file??

Eriks · Accepted Answer · 2014-03-01 12:04:46Z

3

js file

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

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

$scope.showAddChoice = function(choice) {
   return choice.id === $scope.choices[$scope.choices.length-1].id;
};

html

<div class="form-group" data-ng-repeat="choice in choices">
    <label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
        <button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another  choice</button>
    <input type="text" ng-model="choice.name" name="" placeholder="Enter a restaurant name">
</div>

answered Mar 1, 2014 at 12:04

Eriks

3061 gold badge2 silver badges14 bronze badges

Comments

RahulOnRails · Accepted Answer · 2021-03-08 13:13:37Z

2

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <ol>
       <li ng-repeat="element in elements">
         <input type="text" ng-model="element.value"/>
       </li>
    </ol>
    <br/>
    <b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
    <br/>
    <br/>
    <b>Click here to see ng-model value:</b><br/>
    <input type="button" value="submit" ng-click="show(elements)">
  </div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    var counter=0;
      $scope.elements = [ {id:counter, value : ''} ];
      $scope.newItem = function(){
        counter++;
        $scope.elements.push(  { id:counter,value:''} );
    }
    $scope.show=function(elements) {
        alert(JSON.stringify(elements));   
    }
  });
</script>
</body>
</html>

edited Mar 8, 2021 at 13:13

RahulOnRails

6,54211 gold badges55 silver badges88 bronze badges

answered Jun 28, 2017 at 16:59

Pawan Kumar

294 bronze badges

2 Comments

Pawan Kumar Over a year ago

This code is basically used to create dymaic textbox and show textbox value in controller

Liviu Sosu Over a year ago

@PawanKumar,you have provided exactly what I was looking for!

Collectives™ on Stack Overflow

adding a textbox element dynamically to a form by AngularJS

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related