Getting undefined ngModel in Ionic AngularJS

Question

I'm writing a HTML web app using Ionic. While trying to bind an input element to a $scope var, I'm getting undefined.

SignupCtrl.js:

angular.module('SUSU.controllers', [])
.controller('SignupCtrl',
    function ($scope) {

        /* Form entries */
        $scope.signupForm = {
            email: "",
            emailConfirm: ""
        };
});

signup.html:

 <label class="item item-input">
        <input type="email" placeholder="Email" ng-model="signupForm.email">
 </label>

app.js:

angular.module('SUSU', ['ionic','SUSU.controllers'])
.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
    ....
    .state('tabs.signup', {
        url: '/signup',
        views: {
            'login-tab': {
                templateUrl: 'templates/signup.html',
                controller: 'SignupCtrl'
            }
        }
    });

While debugging I have noticed that the value of signupForm.email is undefined after inserting text to the email input. How can I bind those two and what am I doing wrong?

Why would he do that? He's intantiating it in the state view declaration. — SeanCannon
– SeanCannon, Commented Dec 16, 2014 at 19:55

itaied · Accepted Answer · 2014-12-17 19:43:55Z

1

Guys I can't believe I have wasted so much time about that... It's the type="email" who caused the problem. Because of some reason it doesn't work. When I changed it to type="text" it worked fluently.

Comments

brybott · Accepted Answer · 2014-12-16 20:17:03Z

0

There may be a better way to do this, but one way to achieve what you want is to do the following:

In your signup.html add a ng-change to your input:

<label class="item item-input">
    <input type="email" placeholder="Email" ng-model="signupFormEmail" ng-change="updateEmail(signupFormEmail)">
</label>

Then in your controller add a method to $scope that will update your signupForm email property:

$scope.updateEmail = function(email){
    $scope.signupForm.email = email;
}

answered Dec 16, 2014 at 20:17

brybott

1579 bronze badges

2 Comments

itaied Over a year ago

Well that's just too weird... Adding the updateEmail function and debuging it resulted an undefined signupFormEmail var. Maybe I'm using the wrong angular package?? I'm including this Ionic angularjs package : <script src="lib/ionic/js/ionic.bundle.js"></script>

brybott Over a year ago

Sorry, have no clue what that issue could be. I've done almost the same thing before. I'm reviewing my code now and it looks exactly the same.

Collectives™ on Stack Overflow

Getting undefined ngModel in Ionic AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related