How to bind using the ng-model in angular js

Question

I just started using angular js and I was playing with the ng-model directive but I can't figure out what im doing wrong. I want the input email value to show in the h1 tag as I'm typing. pretty much I'm not getting anything show in the h1 tag as I type.

<body ng-app="starter">
    <ion-pane>
        <ion-content style="margin-top: 163px">
            <div ng-controller="loginController">
                <form action="">
                    <div class="row">
                        <div class="col col-50 col-offset-25">
                            <div class="card">
                                <div class="item item-text-wrap">
                                    <div class="list">
                                        <label class="item item-input">
                                            <i class="icon ion-email placeholder       icon"></i><input type="email" placeholder="Email" ng-model="email" />
                                            <h1>{{email}}</h1>
                                        </label>
                                  <label class="item item-input">
                                      <i class="icon ion-locked placeholder-icon"></i><input type="text" placeholder="Password" />
                                  </label>
                                  <br/>
                                  <button class="button button-full button-positive">Clock Me In</button>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </ion-content>
</ion-pane>
</body>

this is my javascript

var app = angular.module('starter', ['ionic'])

app.controller('loginController', function($scope)
{

})

you need to pass the value from controller like $scope.email = "[email protected]" then it show in in your page. — lalitpatadiya
– lalitpatadiya, Commented Jun 5, 2015 at 2:45
Note that if you assigned type="email", the result will only be displayed when the field is valid — Walter Chapilliquen - wZVanG
– Walter Chapilliquen - wZVanG, Commented Jun 5, 2015 at 2:47
lol that was the problem the type email. i changed my code to type text and it worked. thanks — Millenial2020
– Millenial2020, Commented Jun 5, 2015 at 2:51

Umut Benzer · Accepted Answer · 2015-06-05 13:43:10Z

1

Your changes are not displayed on screen because while you are typing the email it is invalid. Invalid values are reflected to $scope as null, so there is nothing to show.

As suggested in comments, you can change it type="text". Since you removed validation, you'll see the text on both screen and in your $scope, however you'll sacrifice validation.

If you still want to use email validation, and want to see it in screen/$scope you can use ng-model-options as described here.

Using ng-model-options you can allow invalid values to be stored in your $scope.

Try adding ng-model-options="{allowInvalid: true}" to your type="email" input.

answered Jun 5, 2015 at 13:43

Umut Benzer

3,5266 gold badges38 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

How to bind using the ng-model in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related