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:

how to do one way binding in angularjs

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.

you may also like