从表单将数据返回给控制器

Question

我在下面有这个表格。当我更改文本字段时，它会在此处显示更改

<div>
    {{authform.email}}{{authform.password}}
</div>

但是当我尝试在按钮上通过ng-click="signup()" 提交表单时，它不会向我发送文本字段的值。 下面是我的代码

<div class="col-md-12" ng-controller="authCtrl">


        <div class="row">
            <div class="col-md-14">
                <div class="jumbotron">

                    <form>
                        <div class="createUserDiv"><input type="text" name="email" placeholder="enter your email address" ng-model="authform.email"/></div>
                        <div class="createUserDiv"><input type="text" name="password" placeholder="enter your password" ng-model="authform.password"/></div>
                        <div class="createUserDiv"><input type="text" name="confirmpassword" placeholder="confirm your password" ng-model="authform.confirmpassword"/></div>

                        <p><a class="btn btn-lg btn-success" ng-click="signup()">Splendid!<span
                                class="glyphicon glyphicon-ok"></span></a></p>
                    </form>
                    <div>
                        {{authform.email}} {{authform.password}}
                    </div>
                </div>

            </div>
        </div>

</div>

这是我的 js

angular.module('myAPP')
    .controller('authCtrl', function ($scope, $http, $location) {


        $scope.signup = function() {

            $scope.authform = {};
            $scope.authform.email = "";
            $scope.authform.password  = "";
            $scope.authform.confirmpassword  = "";

            var data = {
                "dataBlob": {
                    "email": $scope.authform.email,
                    "password":  $scope.authform.confirmpassword

                }
            };

      console.log($scope.authform.email); 
    });

我的console.log 出现空...null....我不确定它为什么不将字段绑定到数据。我对 Angular 还很陌生，所以我仍在尝试弄清楚这些事情。

Answer 1

像这样统计你的控制器：

angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
    $scope.authForm = {};

然后更改您的注册方法以执行此操作：

$scope.signup = function() {
    console.log($scope.authForm);
}

您的值已经绑定，但是当您调用 $scope.authForm = {};在注册过程中，您将覆盖所有值。

另外，不要在按钮上使用 ng-click="signup()"，请执行以下操作：

<form ng-submit="signup()">

当用户在输入字段中时，这将允许您实现验证并在 [enter] 按键上提交

例如，请参阅fiddle