我是新手使用angularjs。我有一个具有自定义拖放表单功能的应用程序。当我在提交后提交表单和清除表单时，动态生成的输入框是机器人删除表单范围。 好吧，我只是创建一个我的问题的示例示例，以便我可以简单地描述它。
这是我的html文件： -
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body ng-controller="myCtrl">
<div>
<form ng-submit="myForm(theForm.$valid)" name="theForm" novalidate="novalidate">
<div id="container"></div>
</form>
</div>
<input type="button" ng-click="addForm()" value="Add">
<pre>{{theForm | json}}</pre>
<table border="2">
<tr ng-repeat="record in records">
<td>{{record.name}}</td>
<td>{{record.age}}</td>
</tr>
</table>
<script src="jquery.1.11.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
对于这个html文件我有一个app.js文件，我在其中声明模块控制器并创建一个动态添加表单的指令。这是完整的app.js文件代码： -
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl' , function($scope, $compile){
var data = [];
$scope.records = data;
$scope.addForm = function(){
$compile($('#container').html('<div class="my-form"></div>'))($scope);
};
$scope.myForm = function(valid){
if(valid){
data.push($scope.form);
$scope.form = null;
$('.my-form').remove();
}
else{
console.log('invalid form');
}
};
})
.directive('myForm', function(){
return {
restrict: 'C',
replace: true,
template: '<div class="maincontainer"><div class="namefield"><input type="text" required="required" name="name" ng-model="form.name"></div><div class="agefield" id="other_field"><input name="age" required="required" type="text" ng-model="form.age"></div><div class="buttons"><input type="submit" value="submit"><input type="button" value="Add" ng-click="addMore()"></div></div>',
controller: function($scope, $compile){
var id = 1;
$scope.addMore = function(){
var html = '<div><input name="other'+id+'" required="required" type="text" ng-model="form.text'+id+'"></div>';
var oldhtml = $('#other_field').html();
oldhtml+=html;
$compile($('#other_field').html(oldhtml))($scope);
id++;
};
}
};
});
此代码说明： -
此代码生成一个包含2个输入字段的简单表单，之后我可以再添加一个字段。提交此表单并清除表单字段并删除此表单。我们可以再次添加更多记录。
现在，如果我添加表单并提交表单而不添加更多输入字段，那么它可以正常工作。
但是如果我添加第三个输入框或者我再添加一个输入框，那么它随时会提交。但在那之后我再次添加新表单，这次我不添加新的输入框，现在我提交此表单，它将不会提交。 Becoz上次生成的第3个输入表格仍在范围内。所以形式说它需要。
那么如何才能完全删除这个生成的表单，以便下次我可以收到包含2个字段的新表单。