Getting text from html scope - html

Question

.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
window.localStorage.removeItem("loggedIn");
if(window.localStorage.getItem("loggedIn") == undefined) {
$scope.doLogin = function() {
var username = $scope.fName + " " + $scope.lName;
console.log(username);
//store login information
window.localStorage.setItem("username", username);
window.localStorage.setItem("password", $scope.password);
window.localStorage.setItem("loggedIn", true);
$http.post('http://localhost:8000/login',{
userName: window.localStorage.getItem("username"),
password: window.localStorage.getItem("password"),
token: $rootScope.devToken,
platform: ionic.Platform.platform()
});
alert("Login Success");
$state.go('main');
};
} else {
alert("Login Success");
$state.go('main');
}
})
<ion-content ng-controller="LoginCtrl">
<form ng-submit="doLogin()" style="display: block; margin: 100px">
<div class="list">
<label class="item item-input">
<input type="text" ng-model="fName" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" ng-model="lName" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="password" ng-model="password" placeholder="Password" style="text-align: center">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Register</button>
</label>
</div>
</form>
</ion-content>
I am trying to get the text from the html field fName and lName using $scope.fName because fName is a ng-model. How come it is returning undefined? I have the controllers set properly. I just can't figure out why username is outputting undefined? I am trying to load the app up at login.html and then once logged in, it will change the state to home.html. I could really use some help doing this.

Answer 1

The ion-content creates its own child scope. Try declaring a main scope object in your controller:
.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
$scope.data = {}
In your template:
<input type="text" ng-model="data.fName" placeholder="First Name">
In your login submit:
var username = $scope.data.fName + " " + $scope.data.lName;

Answer 2

You don't have validation in place to check whether the values are actually filled or not. The scope is not populated on initialization.
If you hit submit before adding anything there is no way those values can be populated and hence they are undefined.
Do something like this in submit button.
<button class="button button-block button-positive"
type="submit" ng-disabled="!fName||!lName">Register
</button>
Good Luck.
The code implementation is found here.
https://codepen.io/anon/pen/YGzxVz

Answer 3

http://ionicframework.com/docs/components/#toggle
i hope this works for you. A little change with CSS will do the trick