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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.