从表单获取数据回到控制器

时间:2014-04-06 04:27:21

标签: javascript angularjs angularjs-scope angular-ui-bootstrap

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

<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 ....我不确定为什么它不将字段绑定到数据。我对角度很新,所以我仍然想弄清楚这些事情。

1 个答案:

答案 0 :(得分:4)

按照以下方式统计您的控制器:

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

然后更改您的注册方法:

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

您的值已绑定,但是当您调用$ scope.authForm = {}时;注册内部,你覆盖了所有的价值观。

也代替ng-click =&#34;注册()&#34;在你的按钮上,执行以下操作:

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

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

有关示例,请参阅此fiddle