CODEWITHSUNDEEP
javascripthtmlangularjs
Millenial2020
Millenial2020

Reputation: 2913

How to bind using the ng-model in angular js

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)
{

})

Upvotes: 1

Views: 116

Answers (1)

Umut Benzer
Umut Benzer

Reputation: 3526

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.

Upvotes: 1

Related Questions