Question

我是角色的新手我试图发布我的表单但是当我点击我的按钮时，我的表单会重新加载URL上的表单数据，我无法查看我的控制台数据。在这里我写了代码。

 <div class="large-7 columns" ng-app="registerform">
                  <div class="sign-up-container" ng-controller="registeruserdetail">
                    <h4 class="title">Not a member? {{2+2}}</h4>
                    <form ng-submit="userdata()">

                        <label>
                          <input type="text" name="firstname" ng-model="registeruser.firstname" placeholder="Firstname">
                        </label>

                        <label>
                          <input type="text" name="lastname" ng-model="registeruser.lastname" placeholder="Lastname">
                        </label>

                        <label>
                          <input type="text" name="email" ng-model="registeruser.email" placeholder="E-mail Address">
                        </label>

                        <label>
                          <input type="text" name="cemail" ng-model="registeruser.confirmemail" placeholder="Confirm E-mail Address">
                        </label>

                        <label>
                          <input type="password" name="password" ng-model="registeruser.password" placeholder="Password">
                        </label>

                        <label>
                          <input type="password" name="cpassword" ng-model="registeruser.confirmpassword" placeholder="Confirm Password">
                        </label>

                        <span class="gender">Gender :</span>
                        <input type="radio" name="gender" ng-model="registeruser.gender" value="male" id="male" ><label for="male">Male</label>
                        <input type="radio" name="gender" value="female" ng-model="registeruser.gender" id="female"><label for="female">Female</label>

                        <div class="button-holder">
                            <button class="" type="submit"><img src="img/sign-up.jpg" /></button>
                        </div>
                    </form>
                  </div>  
                </div>

custom.js

var validationApp = angular.module('registerform', []);

validationApp.controller('registeruserdetail',function($scope,$http){
//$scope.registeruser={};
    $scope.userdata=function(){
        console.log($scope.registeruser);

        $http({
            method:'POST',
            url:'/intern/admin-panel/public/register',
            data:$.param($scope.registeruser),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},


        }).success(function(response) {
       console.log(response);

         alert('hi');
    }).error(function(response) {
       console.log(response);

       alert('hello');
    });
    alert('here i am');
    };

});

如果我在$ http方法下面应用警报（这里是我），在提交时我的代码将我带到这里，即此警报弹出但未获得任何其他记录。任何人都可以告诉我我犯了什么错误的代码。编辑：我找到了这个的原因好像我在页面上应用控制器div我可以按照我的意愿处理，但是当我在揭示模型上应用相同的控制器div时我无法处理我得到的问题我在上面提到。我如何解决这个问题或揭示模型。

Answer 1

我自己回答了我的问题。

所有代码都很好，我只需要阻止显示模型提交表单的默认操作，就像这样。

  <form ng-submit="userdata($event)">  <!-- Pass event-->

                        <label>
                          <input type="text" name="firstname" ng-model="registeruser.firstname" placeholder="Firstname">


                </label>

。。

和 custom.js

$scope.userdata=function(e){ //add event 
         e.preventDefault();  //make change here
         console.log('hi i am here');
        //console.log($scope.registeruser);

Answer 2

请参见此处示例：http://jsbin.com/xejek/2/

validationApp.controller('registeruserdetail',function($scope,$http){

  $scope.userdata=function(){
        console.log($scope.registeruser);

        $http({
            method:'POST',
            url:'/intern/admin-panel/public/register',
            data:$scope.registeruser,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},


        }).then(function(response) {
       console.log(response);

         alert('data posted');
    },function(response) {
       console.log(response);

       alert("can't post data");
    });

    };

});

Angular JS表单重新加载页面

2 个答案: