javascript - 如何读取插入到 ng-model 中的数据？

Question

我正在使用 ionic 框架。我正在尝试创建一个登录页面。我想读取用户名中插入的数据并在 login.html 中传递单词字段。我尝试使用 $scope 进行读取，但没有成功。我尝试使用 console.log() 在控制台中打印变量，但我收到一条错误消息说它是“未定义的”。我是 ionic 和 angularjs 的新手。

登录.html:

<ion-view view-title="Login" name="menuContent">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form >
  <div class="list">
    <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" ng-model="user" placeholder="Email or Phone">
    </label>
    <label class="item item-input item-stacked-label">
    <span class="input-label">Password</span>
    <input type="text" ng-model="pass" placeholder="Password">
    </label>
    <label class="item">
    <button class="button button-block button-positive" type="submit" ng-click="loginNew()">Log in</button>
    </label>
    <label class="item">
    <span class="input-label">New user?</span>
     <button class="button button-block button-positive"   ng-click="signNew()">Signup</button>
    </label>

  </div>
</form>
</ion-content>
</ion-view>

应用程序.js:

.state('app.login', {
    url: "/login",
    views: {
      'menuContent': {
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
      }
    }
  })
  .state('app.signup', {
    url: '/signup',
    views: {
      'menuContent': {
        templateUrl: 'templates/signup.html',
        controller: 'SignupCtrl'
      }
    }
  })

controller.js:

//start LoginCtrl
.controller('LoginCtrl', ['$scope','$state','$http' , function($scope,$state,$http) {
$scope.signNew=function(){
console.log("sas");
$state.go('app.signup');
console.log("sas");
};
$scope.loginNew = function($scope){
        console.log($scope.user+"   daww");
        console.log($scope.pass);
        $http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
            .success(function(data) {    
            alert("Login was Successful.");
            console.log("Login success" + data);
            })
            .error(function(data) {
            alert("Wrong Credentials!!Username or Password was Wrong.")
            });

}
}])
//end LoginCtrl
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//start SignupCtrl
.controller('SignupCtrl', ['$scope',  function($scope) {


}]);
//end SignupCtrl

Answer 1

When you use form in your HTML then go for ng-submit not ng-click, because ng-click not validate your html. Example: If you use required in input box then ng-click not validate required so use ng-submit

请参阅此文档 ng-submit

Note: It is not compulsory to use ng-submit it is just and best practices which we have to follow

根据您的问题，您必须从 html 传递一个对象并在 Controller 中获取该对象。它将解决您的问题。

<form ng-submit="loginNew(login)">
  <div class="list">
    <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" ng-model="login.user" placeholder="Email or Phone">
    </label>
    <label class="item item-input item-stacked-label">
    <span class="input-label">Password</span>
    <input type="text" ng-model="login.pass" placeholder="Password">
    </label>
    <label class="item">
    <button class="button button-block button-positive" type="submit" >Log in</button>
    </label>
    <label class="item">
    <span class="input-label">New user?</span>
     <button class="button button-block button-positive">Signup</button>
    </label>

  </div>
</form>

现在在 Controller 中:

$scope.loginNew = function(mylodinObject){
        console.log(mylodinObject.user+"   daww");
        console.log(mylodinObject.pass);
        $http.get("http://demo.pillocate.com/webservice/Login?Username="+mylodinObject.user+"&Password="+mylodinObject.pass)
            .success(function(data) {    
            alert("Login was Successful.");
            console.log("Login success" + data);
            })
            .error(function(data) {
            alert("Wrong Credentials!!Username or Password was Wrong.")
            });

}

有时候，如果您想同时使用 ng-click 和 ng-submit，那么您就会遇到问题，因此对于该引用链接，它将解决您的问题:ng-click and ng-submit