Question

我有一个表单分为两个不同的部分，我希望用户点击一个部分旁边的“编辑”，然后只提交表单的那一部分。我已经用jquery做了很多次，但是我对角度很新，我找不到/想出正确的方法。此外，这需要以编程方式完成，因为有更多输入和可能会添加到表单的更多部分。非常感谢任何帮助，谢谢！

修改为了澄清，我的问题是：我怎么能提交表格但只发布第一行输入，或只发布第二行输入

修改

好的，这是我对如何实现这一目标的最新想法......

我正在尝试在两个不同的部分发送表单。我想我可以将表单的每个部分包装在一个单独的控制器中，然后在名为“sendForms”的工厂/服务中进行$ http请求（其中一个是正确的方式，工厂或服务？）然后设置工厂/服务中的表单数据到this.formData。然后在所有输入上使用ng-model =“formData”，并在表单元素上使用ng-submit =“sendForms”。我在这里走在正确的轨道上吗？我没有更新代码看起来像这样。

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <form id="edit_profile" ng-submit="processForm()">
            <fieldset>
                <div class="row">
                    <div class="col-md-5 form-group input-text">
                        <label>First Name</label>
                        <input id="first_name" name="first_name"
                               type="text" ng-disabled="toggleinput"
                               class="act_setting"
                               ng-model="userDetails.first_name">
                    </div>
                    <div class="col-md-5 form-group input-text">
                        <label>Last Name</label>
                        <input id="last_name" name="last_name"
                               type="text" ng-disabled="toggleinput"
                               class="act_setting "
                               ng-model="userDetails.last_name">
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-5 form-group input-text">
                        <label>Address 1</label>
                        <input id="address1" name="address1" type="text"
                               ng-disabled="toggleinput"
                               class="act_setting "
                               ng-model="userDetails.address1" >
                    </div>

                    <div class="col-md-5 form-group input-text">
                        <label>Address 2</label>
                        <input id="address2" name="address2" type="text"
                               ng-disabled="toggleinput"
                               class="act_setting "
                               ng-model="userDetails.address2">
                    </div>
                </div>

            </fieldset>
        </form>
    </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script language="javascript">
    var app = angular.module('myApp', ['ui.bootstrap', 'angular-loading-bar', 'ngAnimate', 'ngSanitize', 'ui.select']);
    app.controller('myCtrl', function ($scope,$rootScope,$filter,$http) {
        $scope.toggleinput = false;
        $scope.userDetails = {
            "user_id": "1",
            "address_id": "1",
            "first_name": "patrick",
            "last_name": "lawler",
            "email": "test@mail.com",
            "dob": "1991-06-04",
            "address1": "maple street 5",
            "address2": "apt 4",
            "country_code": "104",
            "state": "illinois",
            "zip": "987654",
            "time_added": "2014-11-20 23:42:02",
            "country_name":"Israel" };

            $scope.processForm = function () {
            $http({
                method: 'POST',
                url: '/profile',
                data: $.param($scope.userDetails),  // pass in data as strings
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}  // set the headers so angular passing info as form data (not request payload)
            })
                    .success(function (data) {
                        console.log(data);
                        if (!data.success) {
                            // if not successful, bind errors to error variables
                            console.log('submit errors')
                        } else {
                            // if successful, bind success message to message
                            $scope.message = data.message;
                        }
                    });
        };
    });
</script>

Answer 1

如果我找对你。
你需要定义两个按钮，如：

<button ng-click="saveFirst()">Save First</button> 
//define second   
<button ng-click="saveSecond()"></button>

js

$scope.saveFirst = function(){

 $http.post('post_es.php', {'firstname': $scope.userDetails.first_name, 'lastname': $scope.userDetails.last_name}
                    ).success(function(data, status, headers, config) {}

}

并检查此Site

希望它能帮到你

Angular JS - 在两个不同的部分提交表单

1 个答案: