I am working on ionic framework.I am trying to create a login page.I want to read data inserted in username and pass word fields in login.html.I tried to read using $scope but that didn't work.I tried to use console.log() to print the variables in console but i am getting an error saying it is "undefined".I am new to ionic and angularjs.
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
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
See this Documentation ng-submit
Note: It is not compulsory to use ng-submit it is just and best practices which we have to follow
And as per you problem you have to pass one object from html and get this object in controller. it will solve your problem.
<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 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.")
});
}
Some time if you want to use both ng-click and ng-submit then you will be in problem so for that refere this link it will solve your problem :ng-click and ng-submit
Design the form as follows
<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 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
};
.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.")
});
}
}])