Post
Ask Question

Adding Controls Dynamically in to the Page in AngularJS

There are some requirement in Angular Screen, We need to add controls dynamically in the page . This Code snippets tells how to add text box, check box, button dynamically into the page on a button click.

  1. <!doctype html>  
  2. <html ng-app="app">  
  3. <head>  
  4.   
  5.     <title>Add Row dynamically</title>  
  6.   
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>    
  8.   
  9.     <script type="text/javascript">  
  10.   
  11.         var ng = angular.module('app', []);  
  12.   
  13.         ng.controller('controller', function ($scope) {  
  14.   
  15.             $scope.rows = []; // declared rows and assigned a empty row to the scope   
  16.   
  17.             $scope.addDynamically = function () {  
  18.   
  19.                 $scope.rows.push({  
  20.                     FirstName: "Fist Name",  
  21.                     LastName: "Last Name",  
  22.                     IsActive: true,  
  23.                     Save:"Save",  
  24.                     
  25.                 }); //Added the values to scopes which need to be added   
  26.             };  
  27.         });  
  28.     </script>  
  29.     <body>  
  30.   
  31.         <h4>Adding Controls Dynamically in Angular Js </h4>  
  32.   
  33.         <div ng-controller="controller" style="border:5px solid gray;width:500px;">  
  34.   
  35.             <button ng-click="addDynamically()" style="color:blue;font-size:18px;">Add New Row Dynamically</button>  
  36.             <div>  
  37.                 <br />  
  38.                 <input type="text" placeholder="Fist Name">  
  39.   
  40.                 <input type="text" placeholder="Last Name">  
  41.   
  42.                 <input type="checkbox" name="check" value="inline">IsActive  
  43.                 <input type="Button" name="check" value="Save" placeholder="Save">  
  44.             </div>  
  45.   
  46.             <div ng-repeat="row in rows">  
  47.                
  48.                 <input type="text" placeholder="{{row.FirstName}}">  
  49.   
  50.                 <input ng-class="{'blockInput': !row.IsActive}" placeholder="{{row.LastName}}" type="text">  
  51.   
  52.                 <input type="checkbox" name="check" value="inline">IsActive  
  53.                 <input type="Button" placeholder="{{row.LastName}}"  value="Save">  
  54.             </div>  
  55.             <br/>  
  56.         </div>  
  57.     </body>  
  58. </html>