3

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

3 Answers 3

2

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

2
  • You have to use login.user in ng-modal and it was my mistake i wrote wrong function name in ng-submit now you can see in code i removed ng-click and in ng-submit is use loginNew function now it will work Commented Jun 20, 2015 at 10:07
  • Let us continue this discussion in chat. Commented Jun 20, 2015 at 11:59
1
    .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.")
                });

    }
    }])
2
  • getting it as undefined Commented Jun 20, 2015 at 9:06
  • when you click Log in, does it print the username and password on the console?
    – Sajal
    Commented Jun 20, 2015 at 9:09
1

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
};
6
  • When i do console.log(xxx) I get undefined Commented Jun 20, 2015 at 9:06
  • have u add xxx in ng-model in form?
    – S Vinesh
    Commented Jun 20, 2015 at 9:08
  • Its my pleasure to help you. So please accept/ tick my answer
    – S Vinesh
    Commented Jun 20, 2015 at 9:10
  • how to access user and pass individually Commented Jun 20, 2015 at 9:12
  • Sorry I dont have enough reputation.You should like my question Commented Jun 20, 2015 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.