Monday, October 19, 2015

Angular two way binding

                       

Two way data binding:  When the view changes model changes and when the model changes view                                        changes
Note: In angular we do not need observable as we need in Knockout
<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <meta charset="utf-8" />
</head>
<body >
<div class="container" >
    <div class="row">
        <div ng-controller="Details">
            <div class="col-md-12" style="padding:20px;">
                <h2> Two way data binding</h2>
                FirstName :
                <input id="firstName" type="text" ng-model="FirstName" />
                </div>
            <div class="col-md-12">
               <p>
                    <b>My Name is :</b> {{FirstName}}  <br />
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
        //declare a module
        var myAppModule = angular.module('myApp', []);
        myAppModule.controller('Details', function ($scope) {
            $scope.FirstName = "Prathap";
        });
      
<script>

No comments:

Post a Comment