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.
- <!doctype html>
- <html ng-app="app">
- <head>
-
- <title>Add Row dynamically</title>
-
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/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({
- FirstName: "Fist Name",
- LastName: "Last Name",
- IsActive: true,
- Save:"Save",
-
- });
- };
- });
- </script>
- <body>
-
- <h4>Adding Controls Dynamically in Angular Js </h4>
-
- <div ng-controller="controller" style="border:5px solid gray;width:500px;">
-
- <button ng-click="addDynamically()" style="color:blue;font-size:18px;">Add New Row Dynamically</button>
- <div>
- <br />
- <input type="text" placeholder="Fist Name">
-
- <input type="text" placeholder="Last Name">
-
- <input type="checkbox" name="check" value="inline">IsActive
- <input type="Button" name="check" value="Save" placeholder="Save">
- </div>
-
- <div ng-repeat="row in rows">
-
- <input type="text" placeholder="{{row.FirstName}}">
-
- <input ng-class="{'blockInput': !row.IsActive}" placeholder="{{row.LastName}}" type="text">
-
- <input type="checkbox" name="check" value="inline">IsActive
- <input type="Button" placeholder="{{row.LastName}}" value="Save">
- </div>
- <br/>
- </div>
- </body>
- </html>