HomeAngularJSGetting Started With AngularJS – Data Binding & Model

Getting Started With AngularJS – Data Binding & Model

In this blog post we are going to see one of most important aspects of angularjs i.e data binding.

AngularJS has a two way data binding, lets see with examples what this means.

Lets change out index.html file to
[js]
<body ng-app=’MainApp’>
<div ng-controller=’MainCtrl’>
<div>
Change Text Here:
<input type=’text’ ng-model=’text’ />
</div>
<div>
<p>Text: {{text}}</p>
</div>
</div>
</body>
[/js]

and our app.js to
[js]
var mainMod = angular.module(‘MainApp’, []);

mainMod.controller(‘MainCtrl’, function ($scope) {
$scope.text = ”;
});
[/js]

In the above example, you will see as soon as any text is entered into the text field it is dynamically updated to the {{text}} variable. This is called two way data binding, i.e the underlying data and DOM have been tightly coupled together.

Angular Expressions

Angular expressions are written inside {{}} and are just basic javascript code snippets. These snippets are evaluated on the controller $scope. More details about angular extensions can be seen here https://docs.angularjs.org/guide/expression

e.g on angular expressions are
[js]
{{number + 1}}
{{items[index]}}
{{product.sku}}
[/js]
In all the above expressions the variables number, items, product are defined in the controller $scope.

Angular Model

ng-model is a way to bind form fields to controller $scope. It can be assigned to input types, select, textarea etc and establish a two way data binding. ng-model is mainly useful for form fields, validation and form submission which we see in detail later.

%d bloggers like this: