Angular Information Binding

AngularJS Data Binding

---

Data binding inward AngularJS is the synchronization betwixt the model in addition to the view.

---

Data Model

AngularJS applications commonly bring a information model. The information model is a collection of information available for the application.

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

---

HTML View

The HTML container where the AngularJS application is displayed, is called the view.
The persuasion has access to the model, in addition to at that spot are several ways of displaying model information inward the view.
You tin utilisation the ng-bind directive, which volition bind the innerHTML of the chemical component to the specified model property:

Example

<p ng-bind="firstname"></p>

You tin too utilisation double braces {{ }} to display content from the model:

Example

<p>First name: {{firstname}}</p>

Or y'all tin utilisation the ng-model directive on HTML controls to bind the model to the view.

---

The ng-model Directive

Use the ng-model directive to bind information from the model to the persuasion on HTML controls (input, select, textarea)

Example

<input ng-model="firstname">

The ng-model directive provides a two-way binding betwixt the model in addition to the view.

---

Two-way Binding

Data binding inward AngularJS is the synchronization betwixt the model in addition to the view.
When information inward the model changes, the view reflects the change, in addition to when information inward the view changes, the model is updated equally well. This happens at in 1 trial in addition to automatically, which makes certain that the model in addition to the persuasion is updated at all times.

Example

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

</script>

---

AngularJS Controller

Applications inward AngularJS are controlled yesteryear controllers. Read almost controllers inward the AngularJS Controllers chapter.
Because of the immediate synchronization of the model in addition to the view, the controller tin live completely separated from the view, in addition to only concentrate on the model data. Thanks to the information binding inward AngularJS, the persuasion volition reverberate whatever changes made inward the controller.

Example

<div ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.changeName = function() {
        $scope.firstname = "Nelly";
    }
});

</script>

---