Two way data binding using AngularJS

Introduction:
In this tutorial I will demonstrate how two-way data binding works in AngularJS.
Description:
Below code is used to two way data binding in AngularJS
To implement this we need to write the code like as shown below

Java Script :
  //Create the module
           
 var myApp = angular
                         .module("myModule5", [])
                         .controller("myController5", function ($scope) {
                             var employee = {
                                 firstName: "Muhammad",
                                 lastName: "Asif",
                                 Age: "25"
                             };
                             $scope.employee = employee;

                         });



HTML :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Two way databinding in AngularJS.html</title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/Script.js"></script>
</head>
<body ng-app="myModule5" >
    <div ng-controller="myController5" style="width:50%;margin:auto;border:1px solid #000;">
        <table style="width:100%;">
            <tr>
                <td>
                    First Name
                </td>
                <td>
                    <input type="text" placeholder="Firstname"
                           ng-model="employee.firstName" />
                </td>
            </tr>
            <tr>
                <td>
                    Last Name
                </td>
                <td>
                    <input type="text" placeholder="Lastname"
                           ng-model="employee.lastName" />
                </td>
            </tr>
            <tr>
                <td>
                    Age
                </td>
                <td>
                    <input type="text" placeholder="Age"
                           ng-model="employee.Age" />
                </td>
            </tr>
        </table>

        <br />

        <table>
            <tr>
                <td>
                    First Name
                </td>
                <td>
                    {{ employee.firstName }}
                </td>
            </tr>
            <tr>
                <td>
                    Last Name
                </td>
                <td>
                    {{ employee.lastName }}
                </td>
            </tr>
            <tr>
                <td>
                    Gender
                </td>
                <td>
                    {{ employee.Age }}
                </td>
            </tr>
        </table>
    </div>
</body>
</html>


DEMO



DEMO

video


Blogger Tips and TricksLatest Tips And TricksBlogger Tricks