如何在angular js中发布表单数据？ 因为输入也由get请求预先填充？

Question

我如何在angular js中发布表单数据？ 我有一个div，它填充了GET请求中的输入。 现在我想在POST中发送此数据，如何发送数据？ 这是一个表格div：

<div class="row" ng-app="myApp" ng-controller="myCtrl">
    <div class="col-lg-4">
        <span>{{myMessage}}</span>
        <form name="userForm" ng-submit="submitForm()">
            <div class="form-group">
                <label>Make</label>
                <input type="text" class="form-control" id="makeid"  ng-model="myMessage.make">
                </div>
                <div class="form-group">
                    <label>Vin</label>
                    <input type="text" class="form-control" id="vinid" ng-model="myMessage.vin">
                    </div>
                    <div class="form-group">
                        <label>Modal</label>
                        <input type="text" class="form-control" id="modalid" ng-model="myMessage.model">
                        </div>
                        <div class="form-group" ng-repeat="part in myMessage.parts">
                            <label>Parts</label>
                            <input type="text" class="form-control" id="partsid" ng-model="part.name">
                                <input type="text" class="form-control" id="partsid" ng-model="part.desc">
                                </div>
                                <button type="submit" class="btn btn-primary" onclick="sendData()">Submit</button>
                            </form>
                        </div>
                    </div>

我试图将此数据发布在url：

<script>
                            function sendData($scope) {
                    $http({
                        url: 'http://192.16.1.1:8080/restproj/v1/dealer/car',
                        method: "POST",
                        data: { 'message' : message }
                    })
                    .then(function(response) {
                            // success
                    }, 
                    function(response) { // optional
                            // failed
                    });
                }
        </script>

但我无法找到一种发布方式。 我可以通过什么方式发送数据？

Answer 1

如果我做对了，您需要这样的东西：

                $http({
                    url: 'http://192.16.1.1:8080/restproj/v1/dealer/car',
                    method: "POST",
                    data: { 'message' : $scope.myMessage}
                })

Answer 2

您不需要按钮上的onSubmit。 在您的控制器中，您需要指定一个SubmitForm（）。

        app.controller('myCtrl', function ($scope, $http) 
        { 

            $scope.submitForm= function () {
                var message = $scope.myMessage   
                $http.post('http://192.16.1.1:8080/restproj/v1/dealer/car',message).then(function (response) {

 }, 
    function (error) {
                    console.log(error);
                                    });
            } 
        });

Answer 3

在AngularJS中，请勿使用onclick 。 相反，我们使用ng-submit或ng-click指令。

<div class="row" ng-app="myApp" ng-controller="myCtrl">
    <span>{{myMessage}}</span>
    <form name="userForm" ng-submit="submitForm()">
        <label>Make</label>
        <input type="text" id="makeid" ng-model="myMessage.make">
        <label>Vin</label>
        <input type="text" id="vinid" ng-model="myMessage.vin">
        <label>Modal</label>
        <input type="text" id="modalid" ng-model="myMessage.model">
        <div ng-repeat="part in myMessage.parts">
            <label>Parts</label>
            <input type="text" ng-model="part.name">
            <input type="text" ng-model="part.desc">
        </div>
        <!-- REMOVE onclick attribute
        <button type="submit" onclick="sendData()">Submit</button>
        -->
        <button type="submit">Submit</button>
    </form>
</div>

在控制器中：

$scope.submitForm = function submitForm() {
    $http({
        url: 'http://192.16.1.1:8080/restproj/v1/dealer/car',
        method: "POST",
        //REMOVE
        //data: { 'message' : message }
        //INSTEAD
        data: $scope.myMessage
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

有关更多信息，请参见AngularJS开发人员指南-表单