Question

我在angularjs中创建表单。在那里，我通过点击＆＃34;添加更多＆＃34;来创建添加更多字段功能。按钮。我已经实现了使用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>

我的问题是，每当我通过点击＆＃34添加更多字段时;添加更多＆＃34;按钮并提交表单，然后只有第一个加载的输入字段发布/发送数据意味着新附加的字段输入不发布数据。无论使用javascritpt附加的字段是什么，它都不会发送/发布输入。这适用于核心PHP，但它不适用于angularjs。有没有办法在angularjs中解决这个问题？

Answer 1

你这样做完全错了。您不应手动添加dom元素。相反，你应该在控制器中有数组并在其中推送新对象：

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

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

1 个答案: