Angularjs在提交表单后处理自定义添加的输入字段_Angularjs_Scope_Angularjs Scope

Angularjs在提交表单后处理自定义添加的输入字段

angularjs

Angularjs在提交表单后处理自定义添加的输入字段,angularjs,scope,angularjs-scope,Angularjs,Scope,Angularjs Scope,我对使用angularjs是新手。我有一个具有自定义拖放表单功能的应用程序。当我提交表单并在提交后清除表单时，动态生成的输入框将自动删除表单范围。好的，我只是创建了一个我的问题的示例，这样我就可以用简单的语言来描述它这是我的html文件：- <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta na

我对使用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文件，我在其中声明module controller并创建一个用于动态添加表单的指令。下面是完整的app.js文件代码：-

此代码的说明：-

这段代码生成了一个包含2个输入字段的简单表单，之后我可以再向其中添加一个字段。提交此表单并清除表单字段，然后删除此表单。我们可以通过再次添加来添加更多记录

现在，如果我添加一个表单并提交表单，而不添加更多的输入字段，那么它可以正常工作

但任何时候，如果我添加第三个输入框或我添加一个以上的输入框，那么它将提交。但在此之后，我再次添加新表单，这次我没有添加新的输入框，现在我提交此表单，它将不会提交。因为上次生成的第三个输入表单仍在范围内。所以形式上说它需要

那么，我如何才能完全删除这个生成的表单，以便下次可以接收带有2个字段的新表单呢

摆脱所有jQuery，使用数据模型生成视图。应该将对象推送到数组中并使用ng repeat。创建一个可以分叉的演示这里是demo@charlietflbasic的工作示例…submit将复制到保存的项目，感谢您的回复。但我的问题并不是由此解决的。此示例中有两个字段名称和年龄..当您单击“添加”按钮时，不要再添加整个表单..只需在名称和年龄中再添加一个同级。所以表单看起来像名称、年龄和其他字段。然后提交。下次只提交带有姓名和年龄字段的表单。然后你会看到变化@charlietflWell你的演示没有标签，所以不清楚。我需要另一个属性将其添加到对象中。不是100%清楚它应该如何工作。只有一张表格？有多个属性？

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++;
            };
        }
    };
});