$scope not working within function AngularJS

Question

My Code :

HTML

<body ng-app="loginApp" ng-controller="loginCtrl" > <div class="loginWrap" > <input type="text" placeholder="Username " ng-model="user" /> <input type="text" placeholder="Password " ng-model="pass" /> <input type="button" value="Login" ng-click="checkLogin()" /> <span ng-bind="resultLog"></span> </div> </body>

Angular Code :::

 var appLog = angular.module('loginApp',[])
 .controller('loginCtrl',function($scope,$http){

 $scope.checkLogin = function(){

  if($scope.user.length > 0 && $scope.name.length > 0  )
  {
      $http.post('php/checkLogin.php',{'n':$scope.user, 'p':$scope.pass})
         .success(function(data)
         {
            if(data)
            {
                $scope.resultLog = "Valid"
            }
             else
            {
                $scope.resultLog = "InValid"
            }
         })
         .error(function()
         {
           $scope.resultLog="Error"
         })
  }
  else
  {
    $scope.resultLog = "Fill All Fields";
  } // end of validation


 } })

I am learning angular JS.. and execute some..

Problem :: $scope.resultLog Not working

Scope Obejct not working inside the function.. it is declare in LoginCtrl and i m using inside the function, declare inside the LoginCtrl

Thanks in advance

check my answer .....its working only thing you have to initialize user and name other wise it will be undefined so you cannot check the length of undefined — Nidhish Krishnan
– Nidhish Krishnan, Commented Apr 3, 2014 at 8:46

Mik378 · Accepted Answer · 2014-04-03 08:50:04Z

2

In your controller, you use $scope.name, what does it point to? since you have ng-model="user", not ng-model="name".

Your input doesn't point to user.name directly but to user. You want to change it like that:

<input type="text" placeholder="Username " ng-model="user.name" />

and in your controller:

$scope.checkLogin = function(){

  $scope.user = {};    

  if($scope.user.name.length > 0 && $scope.user.name.length > 0  )

  //......

}

edited Apr 3, 2014 at 8:50

answered Apr 3, 2014 at 8:39

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nidhish Krishnan Over a year ago

@Mik378 +1 for you answer

Nidhish Krishnan · Accepted Answer · 2014-04-03 08:48:27Z

1

The only thing you have to initialize user and name other wise it will be undefined so you cannot check the length of undefined

Try this one

Working Demo

var appLog = angular.module('loginApp',[]);

appLog.controller('loginCtrl',function($scope,$http){
$scope.user="";
$scope.pass="";
$scope.checkLogin = function(){

if($scope.user.length > 0 && $scope.pass.length > 0  )
{
      $http.post('php/checkLogin.php',{'n':$scope.user, 'p':$scope.pass})
         .success(function(data)
         {
            if(data)
            {
                $scope.resultLog = "Valid"
            }
             else
            {
                $scope.resultLog = "InValid"
            }
         })
         .error(function()
         {
           $scope.resultLog="Error"
         })
}
else
{
  $scope.resultLog = "Fill All Fields";
} // end of validation

} });

edited Apr 3, 2014 at 8:48

answered Apr 3, 2014 at 8:43

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

2 Comments

Mik378 Over a year ago

What is the point to have $scope.user and $scope.name separately? Makes no sense to me

Mik378 Over a year ago

But user and pass are strictly related, it composes credentials. I'd prefer have it in the same scope variable like $scope.credentials.name, $scope.credentials.pass. Indeed you are in a "Login" controller.

Collectives™ on Stack Overflow

$scope not working within function AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related