我正在使用 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
最佳答案
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
关于javascript - 如何读取插入到 ng-model 中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30952006/