var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.forms = [{
name: "form1",
contacts:[{ ac: '', auth: '', autname: ''}]
},{
name: "form2",
contacts:[{ ac: '', auth: '', autname: ''}]
},{
name: "form3",
contacts:[{ ac: '', auth: '', autname: ''}]
}];
$scope.addFields = function (form) {
form.contacts.push({ ac: '', auth: '', autname: '' });
}
$scope.addForm=function(){
$scope.forms.push( {name: "form3",contacts:[{ ac: '', auth: '', autname: ''}]});
}
$scope.submit = function(form){
console.log(form.contacts);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="{{form.name}}"
ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="cont in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.cat"/>
<input type="text" class="xdTextBox" ng-model="cont.loc"/>
</div>
<button ng-click="addForm()">Add Form </button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
</body>
</html>
/* Put your css in here */