AngularJS - ngRepeat form builder w/ inputs
HTML
<div ng-app='app'>
<div ng-controller="tenant">
<div>
<ul>
</ul>
<div>Name</div>
<input type="text" ng-model="name" placeholder="Organization's Name" required/>
<div>Contacts</div>
<ul>
<li ng-repeat="cont in contacts">
<div>
<span>Name</span>
<span>Email</span>
<span>Phone</span>
<span>Mobile</span>
</div>
<div>
<span>
<input type="text" ng-model="cont.name" placeholder="Name" required/>
</span>
<span>
<input type="text" ng-model="cont.email" placeholder="Email" required/>
</span>
<span>
<input type="text" ng-model="cont.phone" placeholder="Phone" required/>
</span>
<span>
<input type="text" ng-model="cont.mobile" placeholder="Mobile" />
</span>
<span ng-hide="contacts.length == 1">
<a href ng-click="contacts.splice($index, 1)">remove</a>
</span>
</div>
</li>
<li>
<a href ng-click="newContact($event)">Add</a>
</li>
</ul>
<pre>$scope.contacts =
{{ contacts | json }};
</pre>
</div>
<div>
<button>Crate account</button>
</div>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <style> pre {
margin: 50px 0;
}
JavaScript
var a = angular.module("app",[]);
a.controller("tenant",tenant);
var a = [{
name: 'a',
email: 'a',
phone: 'a',
mobile: 'a'
},{
name: 'a',
email: 'a',
phone: 'a',
mobile: 'a'
}];
function tenant($scope) {
$scope.name = '';
$scope.contacts =[];
/* $scope.contacts = a; */
$scope.tests = ['a','a','a'];
console.log(a);
$scope.newContact = function ($event) {
console.log($scope.contacts); $scope.contacts.push(JSON.parse(JSON.stringify(a[0])));
console.log($scope.contacts);
$scope.tests.push('a');
if ($event) {
$event.preventDefault();
}
}
$scope.newContact();
}