附加的输入字段元素在angularjs中不起作用 - Appended input field elements are not working in angularjs

Appended input field elements are not working in angularjs

我正在angularjs中创建表单。在其中，我通过点击"添加更多"按钮创建添加更多字段功能。我已经实现了添加更多的功能使用javascript。下面是HTML的代码:

<form method="POST" name="form" ng-submit="insert(user)" role="form">                              
    <div class="top_gets" id="innerdivs">                                                                                                                                                                                                                  
        <input ng-model="user.amount"  type="text"/>                                                                                                                                            
        <input ng-model="user.description" type="text"/>                                                                                                                                                                                                                                                                                                                                                                                       
        <input type="submit" onclick="addMore();" value="Add more"/>
        <input type="submit" value="Save & Continue" class="save_gets" />                                                                                                                                                                                                                          
    </div>  
</form>

下面是Javascript代码:

<script>
    var counter = 0;
    function addMore() {
        counter += 1;
        var div = document.getElementById('innerdivs');
        var innerdiv = '<div id="innerdivs"><!-- Same Form Field Elements---></div>';
        $('#innerdivs').append(innerdiv);
    }
</script>

我的问题是，每当我通过点击"添加更多"按钮添加更多字段并提交表单时，只有第一次加载的输入字段post/发送数据意味着新附加的字段输入不post数据。无论使用javascript添加的字段是什么，它都不会工作，因为它的表单不会发送/发布输入。这适用于核心PHP，但在angularjs中不起作用。有没有办法在angularjs中解决这个问题?

你做得绝对不对。不能手动添加dom元素。相反，你应该在控制器中设置array并将新对象推入其中:

<form name="form" ng-submit="save(users)" role="form" ng-controller="addUserCtrl">
    <div class="top_gets" ng-repeat="user in users">
        <input ng-model="user.amount" type="text" />
        <input ng-model="user.description" type="text"/>
        <input type="button" ng-click="addMore();" value="Add more" />
        <input type="submit" value="Save & Continue" class="save_gets" />
    </div>
</form>

在控制器:

angular.module(<module_name>).controller('addUserCtrl', ['$scope', function (scope) {
    scope.users = [{}];
    scope.addMore = function () {
        scope.users.push({});
    };
    scope.save = function () {
        // send `scope.users` to server with $http or $resource
    };
}]);