How to add dynamically input fields to form using AngularJS?

How to Add Dynamically Input Fields to form using AngularJS?

Hi everyone, I am going to share the code sample for add new input fields dynamically on click on a button using AngularJs? 
The display output look like below give image. 
The Table of Context. 
  1. The JavaScript code sample. 
  2. The HTML code sample. 
  3. The Full Example code sample
The JavaScript Code Sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rows = [];
  
      $scope.addDynamically = function() {
        $scope.rows.push({
          pick: false,
          question: "",
          fnPlaceholder: "Fist Name",
          lnPlaceholder: "Last Name",
          text: ""
        });
      };
    });
var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rows = [];
 
      $scope.addDynamically = function() {
        $scope.rows.push({
          pick: false,
          question: "",
          fnPlaceholder: "Fist Name",
          lnPlaceholder: "Last Name",
          text: ""
        });
      };
    });
The HTML Code Sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
<div ng-controller="controller">
      <button ng-click="addDynamically()">Add New Row Dynamically</button>
      <div>
        <input type="text" placeholder="Fist Name">
        <input type="text" placeholder="Last Name">
        <input type="checkbox" name="check" value="inline">Pick
      </div>
      <div ng-repeat="row in rows">
        <input type="text" placeholder="{{row.fnPlaceholder}}" ng-model="row.question">
        <input ng-class="{'blockInput': !row.pick}" placeholder="{{row.lnPlaceholder}}" type="text" ng-model="row.text">
        <input type="checkbox" name="check" value="inline" ng-model="row.pick">Pick
      </div>
 </div>
<div ng-controller="controller">
      <button ng-click="addDynamically()">Add New Row Dynamically</button>
      <div>
        <input type="text" placeholder="Fist Name">
        <input type="text" placeholder="Last Name">
        <input type="checkbox" name="check" value="inline">Pick
      </div>
      <div ng-repeat="row in rows">
        <input type="text" placeholder="{{row.fnPlaceholder}}" ng-model="row.question">
        <input ng-class="{'blockInput': !row.pick}" placeholder="{{row.lnPlaceholder}}" type="text" ng-model="row.text">
        <input type="checkbox" name="check" value="inline" ng-model="row.pick">Pick
      </div>
 </div>
The Full Example code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html ng-app="app">
<head>
  <title>Add Row dynamically</title>
  <script type="text/javascript">
    var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rows = [];
      $scope.addDynamically = function() {
        $scope.rows.push({
          pick: false,
          question: "",
          fnPlaceholder: "Fist Name",
          lnPlaceholder: "Last Name",
          text: ""
        });
      };
    });
  </script>
  <body>
    <h4>How to add dynamically input fields to form using AngularJS?</h4>
    <div ng-controller="controller">
      <button ng-click="addDynamically()">Add New Row Dynamically</button>
      <div>
        <input type="text" placeholder="Fist Name">
        <input type="text" placeholder="Last Name">
        <input type="checkbox" name="check" value="inline">Pick
      </div>
      <div ng-repeat="row in rows">
        <input type="text" placeholder="{{row.fnPlaceholder}}" ng-model="row.question">
        <input ng-class="{'blockInput': !row.pick}" placeholder="{{row.lnPlaceholder}}" type="text" ng-model="row.text">
        <input type="checkbox" name="check" value="inline" ng-model="row.pick">Pick
      </div>
    </div>
  </body>
</html>
<!doctype html>
<html ng-app="app">
<head>
  <title>Add Row dynamically</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
  <script type="text/javascript">
    var ng = angular.module('app', []);
    ng.controller('controller', function($scope) {
      $scope.rows = [];
      $scope.addDynamically = function() {
        $scope.rows.push({
          pick: false,
          question: "",
          fnPlaceholder: "Fist Name",
          lnPlaceholder: "Last Name",
          text: ""
        });
      };
    });
  </script>
  <body>
    <h4>How to add dynamically input fields to form using AngularJS?</h4>
    <div ng-controller="controller">
      <button ng-click="addDynamically()">Add New Row Dynamically</button>
      <div>
        <input type="text" placeholder="Fist Name">
        <input type="text" placeholder="Last Name">
        <input type="checkbox" name="check" value="inline">Pick
      </div>
      <div ng-repeat="row in rows">
        <input type="text" placeholder="{{row.fnPlaceholder}}" ng-model="row.question">
        <input ng-class="{'blockInput': !row.pick}" placeholder="{{row.lnPlaceholder}}" type="text" ng-model="row.text">
        <input type="checkbox" name="check" value="inline" ng-model="row.pick">Pick
      </div>
    </div>
  </body>
</html>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book