Two way binding in Angular
Today i would show you a simple example of two way binding in Angular.
Note:
- Like Knockout we do not need any observable.
- Less amount of code
- When view changes model changes. When model changes view changes. This is known as two way binding
<!DOCTYPE html> <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>
Output
No comments:
Post a Comment