AngularJS ng-model

The ngModel directive binds an input, select, textarea to a property on the scope using NgModelController. One can also bind same property on multiple input elements. Few points to note:

  • Change initiated from one input will propagate to all other places.
  • Change can also be initiated by modifying scope variable in Javascript.
<div ng-app="myApp">
  <label>Name:</label>
  <input type="text" ng-model="yourName" ng-init="yourName='Rahul Gupta'">
  <input type="text" ng-model="yourName">
  <p>Hello {{yourName}}!</p>
  <label>City:</label>
  <input type="text" ng-model="yourCity">
  <p>in city {{yourCity}}!</p>
<div/>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript">
  var module = angular.module("myApp", []);
  module.run(['$rootScope', function($rootScope){
    $rootScope.yourCity = 'Bangalore';
  }]);
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments