Learning Site

In this article I will explain a simple tutorial with an example, what is  Two way Databinding  in AngularJS. This article will explain an example of  Two way Databinding  in AngularJS using  ng-bind  directive and  Templates .     Two way Databinding in AngularJS In AngularJS  Two way Databinding , the Model and View are synchronized. In other words when the Model data changes, the change is reflected in the View while when the View changes, the Model is updated.   AngularJS ng-bind and Template ng-bind This directive binds the model value to the HTML element. Template Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.   AngularJS: Two way Databinding Tutorial with example Following is a simple example to display data using  ng-bind  and  templates  in AngularJS. In this example, I have set the  ng-model  directive for the TextBox...

Note :  If you want to learn more about  ng-click  directive, please refer my article  ng-click directive example .   Population of multiple CheckBoxes Inside the  GenerateTable  function, an array of JSON objects is created and assigned to the  Customers  JSON array. The  ng-repeat  directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row). The TBODY element of the HTML Table has been assigned  ng-repeat  directive in order to iterate through all the items of the  Customers  JSON array. For each JSON object in the  Customers  JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.   Check Uncheck All functionality There are two methods which implement the Check Uncheck All functionality.   CheckUncheckHeader  – This method as the nam...

< html   xmlns ="http://www.w3.org/1999/xhtml"> < head >      < title ></ title > </ head > < body >      < script   type ="text/javascript"   src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></ script >      < script   type ="text/javascript">          var  app = angular.module( 'MyApp' , [])         app.controller( 'MyController' ,  function  ($scope, $window) {             $scope.Fruits = [{                 FruitId: 1,                 Name:  'Apple' ,          ...