<!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 = []; // declared rows and assigned a empty row to the scope
$scope.addDynamically = function () {
$scope.rows.push({
FirstName: "Fist
Name",
LastName: "Last Name",
IsActive: true,
Save: "Save",
}); //Added the values to scopes which need to be added
};
});
</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>
