Introduction:

In this article we will explain how to use One way data binding in AngularJS with example.

  • Description:

 

In angularJS  One way data binding means binding data from Model to View. the model values are automatically assigned to the HTML placeholder elements specified through the data binding notation, but the HTML elements don't change the values in the model. 

Let’s see an example One way data binding in angularjs

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
  
    <script>
        var app = angular.module('app', []);
        app.controller('myController', function ($scope) {
            $scope.Name = 'manoj sharma';
            $scope.ContactNo = '75*******';
            $scope.Address = 'mumbai, India';
        });
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <h2>One way data binding - AngularJS</h2>
        <p> Name: {{ Name }} </p>
        <p> Contact: {{ ContactNo }} </p>
        <p>Address: <span ng-bind="Address"></span></p>
    </div>
    </body>
</html>

Output:


In above code , we have Name, ContactNo and Address representing the model value. When the page

loads, these values are set in the data binding placehoders (here first data binding placeholder is

{{ Name}} and second data binding placeholder is  {{ ContactNo }} and second data binding

placeholder is  ng-bind attribute.



 I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.