javascript - 附加的输入字段元素在 angularjs 中不起作用

Question

我正在 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>

我的问题是，每当我通过单击“添加更多”按钮添加更多字段并提交表单时，只有首先加载的输入字段才会发布/发送数据，这意味着新附加的字段输入不会发布数据。无论使用 javascritpt 附加什么字段都不起作用，即表单不会发送/发布输入。这适用于核心 PHP，但不适用于 angularjs。有什么办法可以在 AngularJS 中解决这个问题吗？

Answer 1

你这样做绝对是错误的。您不应手动添加 dom 元素。相反，您应该在 Controller 中有数组并在其中推送新对象:

<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>

在 Controller 中:

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