CODEWITHSUNDEEP
htmlangularjsionic-framework
Austin Hunter
Austin Hunter

Reputation: 394

Getting text from html scope

.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.

Upvotes: 0

Views: 86

Answers (3)

Devansh sadhotra
Devansh sadhotra

Reputation: 1625

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

Upvotes: 0

Dinesh Devkota
Dinesh Devkota

Reputation: 1417

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

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40084

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;

Upvotes: 1

Related Questions