AngularJS - 表单提交答案

【问题标题】：AngularJS - Form SubmissionAngularJS - 表单提交
【发布时间】：2015-08-12 22:39:13
【问题描述】：

我最近开始使用 AngularJS，即使我能够在网页加载时通过 $http 发送数据，但在按下按钮时我无法做到这一点。我的代码：

<div ng-app="myApp" ng-controller="myCtrl">
    Username: <input type="text" id="u" ng-model="username"><br>
    Password: <input type="text" id="p" ng-model="password"><br>
    Email: <input type="text" id="e" ng-model="email"><br>
    First Name: <input type="text" id="fn" ng-model="firstName"><br>
    Last Name: <input type="text" id="ln" ng-model="lastName"><br>
    <br>
    <button onclick="sendData()">Click me</button>
    <br>
    {{status}}
</div>

<script>
    var app = angular.module('myApp', []);
    var arr = new Array();

    function sendData() {
        arr[0] = document.getElementById("u").value;
        arr[1] = document.getElementById("p").value;
        arr[2] = document.getElementById("e").value;
        arr[3] = document.getElementById("fn").value;
        arr[4] = document.getElementById("ln").value;

        app.controller('myCtrl', function($scope, $http) {
            $http.post("../signup.php", {'data' : arr})
                .success(function(response) {
                    $scope.status = response.status;
                    $scope.description = response.description;
                    $scope.content = response.content;
                });
        });
    }
</script>

使用该代码，app.controller 中的函数不会执行，但如果我将它放在 sendData() 函数之外，它会执行，但会在加载页面后立即执行。

有人可以帮我在按下按钮时让它工作吗？

【问题讨论】：

标签： javascript jquery html angularjs scope

【解决方案1】：

既然您想使用 angular 并且您在视图中使用 ng-model，您应该使用 ng-click 您的按钮：

<button ng-click="sendData()">Click me</button>

更好的是，您可以在表单上使用 ng-submit 并使用提交按钮。

在您的控制器中，您将拥有如下内容：

$scope.username = '';
$scope.email = '';
// better have an user object here so you will not have n variables ...

$scope.sendData = function() {
     var arr = [];
     arr[0] = $scope.username;
     arr[1] = $scope.email;
     //........
     $http.post("../signup.php", {data : arr})
        .success(function(response) {
            $scope.status = response.status;
            $scope.description = response.description;
            $scope.content = response.content;
        });
}

【讨论】：

【解决方案2】：

你需要在你的控制器范围内定义函数

HTML

<button ng-click="sendData()">Click me</button>

app.controller('myCtrl', function($scope, $http) {
    $scope.sendData = function(
        $http.post("../signup.php", {'data' : arr})
            .success(function(response) {
                $scope.status = response.status;
                $scope.description = response.description;
                $scope.content = response.content;
            });
     }
});

【讨论】：