My current controller setup looks like this:
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('loginController',['$http', function($http)
{
this.loginForm = function(){
console.log(this.email); //displays undefined
console.log(this.password); //displays undefined
var encodedString = 'email=' +
encodeURIComponent(this.email) +
'&password=' +
encodeURIComponent(this.password);
$http({
method:'POST',
url: 'rs/loginResource',
data: encodedString,
headers: {'Content-Type' : 'application/x-www-form-urlencoded'}
});
};
}]);
The values of this.email and this.password are returning as undefined in the current implementation.
This is how my form is structured:
<!-------------- loginController declared here (ERROR when declared)------------------->
<div class="row" ng-controller="loginController as loginCtrl">
<div class="col-md-12">
Login via
<div class="social-buttons">
<a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#" class="btn btn-google" ><i class="fa fa-google"></i> Google</a>
</div>
or
<!------------------------------------ Here is the form ---------------------------------------------------------->
<form class="form" role="form" method="post" ng-submit="loginCtrl.loginForm()" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2" ng-model="loginCtrl.inputData.email">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2" ng-model="loginCtrl.inputData.password">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right"><a href="">Forget the password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
<!------------------------------------ End of form ---------------------------------------------------------->
</div>
<div class="bottom text-center">
New here ? <a href="#"><b>Join Us</b></a>
</div>
</div>
I attempted to retrieve the values using
console.log(this.email); console.log(this.password);undefined. Are there alternative methods to access values in AngularJS?