Angularjs model not updating from view input field? [duplicate]

Question

I;m trying to get the username from the input field and pass to the function to create a user account but the username input in the field does seem to be updated in model.

I used window.alert to display the username just for the test purpose.

login.html

ion-view view-title="Login">
    <ion-content>

         <div class="list list-inset" padding>

            <div class="item-divider" align="center"> Login</div>

            <label class="item item-input">
                <span class="input-label">UserName</span>
                <input  ng-model="username" type="text" placeholder="Email">
            </label>

            <label class="item item-input">
                <span class="input-label">Password</span>
                <input  ng-model="password" type="password" placeholder="Your Password">
            </label>  

        </div>
         <center><button class="button button-positive " ng-click="log()">Login</button> </center>

app.js (not the whole code)

blog.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('mainlist',{
        url:'/mainlist',
        templateUrl:'templates/MainList.html',
        controller:'listCtrl'
    })
        .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginCtrl'
        });
blog.controller('loginCtrl',function($scope)
                {
                        $scope.log=function()
                        {
                            var username= $scope.username;
                            window.alert(username);
                        }

                    }
               );

Refer this answer stackoverflow.com/questions/36177702/…

Pankaj Parkar
– Pankaj Parkar

2016-07-04 07:30:59 +00:00
Commented Jul 4, 2016 at 7:30 — Pankaj Parkar
– Pankaj Parkar, Commented Jul 4, 2016 at 7:30
thanks Pankaj Parkar It worked!!

mhrzn
– mhrzn

2016-07-04 07:44:00 +00:00
Commented Jul 4, 2016 at 7:44 — mhrzn
– mhrzn, Commented Jul 4, 2016 at 7:44

Victor Ribeiro da Silva Eloy · Accepted Answer · 2016-07-04 07:36:17Z

0

You need first to define the model. Change your code to this and it should work(not tested):

blog.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('mainlist',{
        url:'/mainlist',
        templateUrl:'templates/MainList.html',
        controller:'listCtrl'
    })
        .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginCtrl'
        });


blog.controller('loginCtrl',function($scope)
                {

                        $scope.username = "";
                        $scope.log=function()
                        {
                            var username= $scope.username;
                            window.alert(username);
                        }

                    }
               );

answered Jul 4, 2016 at 7:36

Victor Ribeiro da Silva Eloy

4,1793 gold badges30 silver badges34 bronze badges

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

Comments

mhrzn · Accepted Answer · 2016-07-04 07:48:02Z

0

<label class="item item-input">
                <span class="input-label">UserName</span>
                <input  ng-model="data.username" type="text" placeholder="Email">
 </label>

app.js

blog.controller('loginCtrl',function($scope)
            {
                    $scope.data={};
                    $scope.log=function()
                    {
                        var username= $scope.data.username;
                        window.alert(username);
                    }

                }
           );

answered Jul 4, 2016 at 7:48

mhrzn

3991 gold badge4 silver badges19 bronze badges

2 Comments

Pankaj Parkar Over a year ago

better use controllerAs pattern while defining controller

mhrzn Over a year ago

im just learning Angularjs , thanks for the sugesstion

Collectives™ on Stack Overflow

Angularjs model not updating from view input field? [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related