Data binding - m-kostira/angularjs-notes GitHub Wiki

A note on two-way data binding:

Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components.[...]When the model changes, the view reflects the change, and vice versa.

Two-way data-binding is established by adding the ng-model directive as an attribute to an HTML input tag. Also see https://docs.angularjs.org/guide/interpolation for how {{}} works.

Two-way data-binding:

<div ng-app="myApp" ng-controller="myCtrl">
  <!-- whatever you type in one input appears in the other -->
  Name: <input ng-model="name">
  Name2: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

A scope property created by an ng-model directive:

<div ng-app="">
 <p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1> <!-- changes to whatever you type into the input -->
</div>

Another example:

var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

<div ng-controller="DoubleController">
  <!-- {{ double(num) }} updates when you change the input -->
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>
⚠️ **GitHub.com Fallback** ⚠️