0

如何在 AngularJS 中发布表单中的数据？

<form data-ng-submit="doSomething()">
    <input type="text" data-ng-input="do_obj.text"/>
    <input type="email" data-ng-input="do_obj.email"/>
    <input type="submit" value="Do something"/>
</form>

$scope.doSomething = function () {
        $http({url: '/api/oauth2/register', method: 'POST', data: $scope.do_obj}
        ).then(function (data, status, headers, config) {
                   $log.info("data = ", data, "status = ", status,
                             "headers = ", headers, "config = ", config);
               }
        );
};

Plnkr（引导风格）

4

1 回答 1

0

在此处查看 plunker 代码

将 data-ng-input 更改为 data-ng-model 并更新 data-ng-submit 以将模型传入范围控制器进行处理。

HTML：

<body data-ng-app>
        <div data-ng-controller="DoCtrl" class="container" style="margin: 15px">
            <form data-ng-submit="doSomething(do_obj)" role="form" class="form-inline">
                <div class="form-group">
                    <input type="text" data-ng-model="do_obj.bar"
                           placeholder="Enter text"
                    />
                </div>
                <div class="form-group">
                    <input class="form-group" type="email"
                           data-ng-model="do_obj.email"
                           placeholder="Enter email"
                    />
                </div>
                <div class="form-group">
                    <input class="btn btn-lg" type="submit"
                           data-ng-class="{'btn-info': hover}"
                           data-ng-mouseenter="hover = true"
                           data-ng-mouseleave="hover = false"
                           value="Do something"
                            />
                </div>
            </form>
        </div>
    </body>

发布的语法是 $http.post({url}, {payload});。我已经更新了您的控制器函数以接收要传递给帖子的参数。

控制器代码：

function DoCtrl($scope, $http, $log) {
    $log.info("In DoCtrl");
    $scope.do_obj = {};
    $scope.doSomething = function (data) {
      $http.post('/api/oauth2/register', data)
        .success(function(successData){
          console.log(successData);
        });
    }
}
于 2014-07-15T02:55:49.797 回答