Free Web Development Online Tutorials, Learn to Code
Learn AngularJS, angularjs tutorial, angularjs directive, angularjs application, angularjs api

Model Databinding in AngularJS

Here you learn what model in angular js, how to define model within script, how angular model data binding done with html elements etc.

Angular Data Model

First we need to understand what is data model in Angular.js, then how to bind that data with html element.

The data model is the collection of data available for the application, let's look at the example below.

<script>
var _module = angular.module('wtrModule', []);
_module.controller('wtrCtrl', function ($scope) {
$scope.studentName = "Arijit Bramhachari";
$scope.studentAddress = "S. V. Road, Malad West, Mumbai";
});
</script>

Now if you look at the above code
  • First creating a module
    var _module = angular.module('wtrModule', []);
                
  • In module we are creating controller with multiple properties and setting the values of each property at the same time.
    _module.controller('wtrCtrl', function ($scope) {
        $scope.studentName = "Arijit Bramhachari";
        $scope.studentAddress = "S. V. Road, Malad West, Mumbai";
    });

Bind data to HTML element

In AngularJS we can bind data in two different ways, ng-bind is the attribute used for databinding

Approach 1: using ng-bind attribute

<div ng-app="wtrModule" ng-controller="wtrCtrl">
<p ng-bind="studentName"> </p>
</div>

Approach 2: using {{ propertyName }}

<div ng-app="wtrModule" ng-controller="wtrCtrl">
<p>{{studentName}} at {{studentAddress}} </p>
</div>

Angular Js Data Binding Result

Now here you can see the result of angular data binding using above two techniques

Result 1:

Result 2

{{studentName}} at {{studentAddress}}

Hope you understood model data binding in angular js


 
AngularJS Online Tutorial

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course