/ / How to Add Dynamically Input Fields to form using AngularJS?
How to add dynamically input fields to form using AngularJS?

How to Add Dynamically Input Fields to form using AngularJS?

Edit
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 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>
<!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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

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