ngModel

Experimenting with ngModel

by santhosh lanka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<div ng-app="app">
  <div ng-controller="formCtrl as ctrl">
<input type="text" [(ngModel)] = "lanka"/> {{lanka}}
    <form name="ctrl.form">
      <div class="form-group">
        <email-address></email-address>
      </div>
      <div class="form-group">
      <password></password>
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile" ng-model="user.file">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="user.checked"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default" ng-click="ctrl.save(user)">Submit</button>
    </form>
  </div>
</div>

JavaScript

"use strict";

// Source
var MyCtrl = function(){
};

MyCtrl.prototype.save = function(user){
  if(this.form.$valid){
  console.log(user)
  }
};

angular.module('app', [])
  .controller("formCtrl", MyCtrl)
  .directive("emailAddress", function() {
    return {
      template: '<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="user.email">'
    }
  })
  .directive("password", function() {
    return {
      template: '<label for="exampleInputPassword1">Password</label>        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="user.password">'
    }
  });