angularjs中的双向数据绑定无法在控制器端绑定我的值

时间:2016-03-22 04:32:09

标签: angularjs ionic-framework

我在离子工作,我使用Ubuntu和chrome来查看我的日志,在这里我试图将用户输入的数据绑定到一个对象,以便我可以将用户输入的值发布到服务器。

我的HTML看起来像

<ion-modal-view ng-controller="SignInCtrl">
  <ion-header-bar>
    <button class="button ion-chevron-left" ng-click="signUpBack()" >Back</button>
    <div class="h1 title">Form Validation</div>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <label class="item item-input item-stacked-label">
        <span class="input-label">UserName</span>
        <input type="text" placeholder="John" data-ng-model="formUserName">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Name</span>
        <input type="text" placeholder="Suhr" data-ng-model="formName">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Email</span>
        <input type="text" placeholder="john@suhr.com" data-ng-model="formEmail">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Password</span>
        <input type="text" placeholder="sdftw" data-ng-model="formPassword">
      </label>
    </div>

    <button class="button button-block button-positive" ng-click="createUser()">
      Create Account
    </button>
  </ion-content>
</ion-modal-view>

和我的控制器在这里请检查我的formPost,我试图在formPost变量中绑定用户输入的值。

app.controller('SignInCtrl',['$scope','$http','$state',function($scope,$http,$state){
  console.log('invoking SignInCtrl');

  $scope.signUpBack = function(){
    $state.go('details');
  };

  $scope.createUser = function(){      

    var formPost = {
      "Username":$scope.formUserName,
      "Name":$scope.formName,
      "EmailID":$scope.formEmail,
      "Password":$scope.formPassword
    };
    console.log(formPost);

    $http.post("http://aflaree.com/qrcodeservice/Service1.svc/Signupsupervisor", formPost)
      .success(function(response){
        console.log(response);

      if(!response.Response ){
        alert(response.Response);
        $state.go('login');
      }
        else{
          alert('error');
        }
      })
      .error(function(response){
        console.log(response);
        alert(' error Username already exist');
      });
  };
}]);

在console.log(formPost)中;我得到了未定义的值,但我需要用户输入的值有任何想法。

由于

1 个答案:

答案 0 :(得分:0)

您可以简化它:

&#13;
&#13;
app.controller('SignInCtrl',['$scope','$http','$state',function($scope,$http,$state){
  console.log('invoking SignInCtrl');

  $scope.signUpBack = function(){
    $state.go('details');
  };

  $scope.createUser = function(form){      

    console.log(form);

    $http.post("http://aflaree.com/qrcodeservice/Service1.svc/Signupsupervisor", form)
      .success(function(response){
        console.log(response);

      if(!response.Response ){
        alert(response.Response);
        $state.go('login');
      }
        else{
          alert('error');
        }
      })
      .error(function(response){
        console.log(response);
        alert(' error Username already exist');
      });
  };
}]);
&#13;
<ion-modal-view ng-controller="SignInCtrl">
  <ion-header-bar>
    <button class="button ion-chevron-left" ng-click="signUpBack()" >Back</button>
    <div class="h1 title">Form Validation</div>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <label class="item item-input item-stacked-label">
        <span class="input-label">UserName</span>
        <input type="text" placeholder="John" data-ng-model="form.UserName">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Name</span>
        <input type="text" placeholder="Suhr" data-ng-model="form.Name">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Email</span>
        <input type="text" placeholder="john@suhr.com" data-ng-model="form.Email">
      </label>
      <label class="item item-input item-stacked-label">
        <span class="input-label">Password</span>
        <input type="text" placeholder="sdftw" data-ng-model="form.Password">
      </label>
    </div>

    <button class="button button-block button-positive" ng-click="createUser(form)">
      Create Account
    </button>
  </ion-content>
</ion-modal-view>
&#13;
&#13;
&#13;