How do I read the data inserted into ng-model?
I am working on an ionic framework. I am trying to create a login page. I want to read data inserted in username and pass word fields to login.html. I tried to read with $ scope but it didn't work. I tried to use console.log () to print variables to the console, but I get an "undefined" error. I am new to ionic and angular.
login.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>
app.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
+3
source to share
3 answers
When you are using the form in your HTML go to ng-submit . ng-click , because ng-click doesn't validate your html. Example . If you are using the required on the input field then ng-click does not validate, so use ng submit
See this ng-submit documentation
Note . It is not necessary to use ng-submit , it is simpler and better practices that we must follow
And for your problem you have to pass one object from html and get this object in controller. it will solve your problem.
<i>
<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>
Now in the controller:
<i>
$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.")
});
}
For a while, if you want to use ng-click and ng-submit then you have a problem, so for linking to this link, it will solve your problem: ng-click and ng-submit
+2
source to share
Create a form like this
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="xxx.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="xxx.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew(xxx)">Log in</button>
</label>
</div>
</form>
and in the controller
$scope.loginNew = function(xxx){
console.log(xxx); // this gives the user and pass variables from form
console.log(xxx.user); //for user
console.log(xxx.pass); //for pass
};
+1
source to share
.controller('LoginCtrl', ['$log','$scope','$state','$http' , function($log,$scope,$state,$http) {
$log.debug($scope.user);
$log.debug($scope.pass);
Need not pass $scope as the parameter here
$scope.loginNew = function(){
$log.debug($scope.user);
$log.debug($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
$log.debug("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
+1
source to share