I'm facing an issue with a form that contains various fields and two buttons - one for cloning the entire form and another for cloning just the form fields. I attempted to use ng-repeat, but when I clone the form and then try to clone fields in the original form, it ends up cloning the fields in the duplicated form as well. How can I prevent this from happening? Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdcd3dac8d1dccf92d6cefd8d938b918c">[email protected]</a>" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyController">
<div ng-repeat="form in forms">
<hr />
<form name="myForm" ng-init="name = form.name">
<br>
<div ng-repeat="user in users">
<input type="text" ng-model="user.name"/>
<input type="text" ng-model="user.phone"/>
</div><br>
<button type="button" href="" ng-click="addUser()">Add user</button>
</form>
</div>
<hr />
<input type="button" value="Create form" ng-click="createForm()" />
</div>
</body>
</html>
This is what my `script.js` looks like:
angular.module("myApp", []).controller('MyController',
['$scope', function($scope){
$scope.forms = [{name: "form1"}];
$scope.createForm = function(){
$scope.forms.push({name: "form" + ($scope.forms.length + 1)});
};
$scope.saveForm = function(formScope){
alert("Save called for " + formScope.name + ", myInputValue = " + formScope.myInputValue);
};
$scope.users = [{name: 'John',phone: '098097770'},{name: 'Alice',phone: '765876598'}];
$scope.addUser = function() {
$scope.users.push({name: 'New user',phone: ''});
};
$scope.submit = function() {
alert('Here are the users: ' + angular.toJson($scope.users));
};
}]);
You can view the Plnkr Demo here.