How to do a Two way binding in AngularJS

AngularJS is a javascript framework developed by Google. AngularJS is a declarative approach of manipulation of application data and view. In the same time AngularJs provides a Two way binding in AngularJS functionality that is very impressive with very short amount of code. Two way binding is a process of in AngularJS where you can update the view anytime or every time you want. The code for demo available at the bottom of page.

AngularJS code
Copy the below code and paste it into a script.js


var app = angular.module("myApp", []);
app.controller('limit_studies', ['$scope', function($scope){
	var employees = [
			{employe_id: 96325, name:"Santosh", dob: new Date("November 04, 1991"), gender: "Male", salary: 20000},
			{employe_id: 96320, name:"Manish", dob: new Date("February 04, 1991"), gender: "Male", salary: 80000},
			{employe_id: 56828, name:"Bishal", dob: new Date("october 04, 1991"), gender: "Male", salary: 60000},
			{employe_id: 66528, name:"Gandhi", dob: new Date("January 04, 1991"), gender: "Male", salary: 50000},
			{employe_id: 96395, name:"Mandeva", dob: new Date("March 04, 1991"), gender: "Male", salary: 40000},
			{employe_id: 99307, name:"Mitali", dob: new Date("April 04, 1991"), gender: "Female", salary: 30000}
	]
	$scope.employees = employees;
	$scope.limitRows = 2;
}])

Similarly for HTML code copy the below code and paste it into index.html or any desire file you want.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="limit_studies">
Select number between 0-5<input type="number" steps="1" min="0" max="5" ng-model="limitRows">
<br>
<br>
<table>
<thead>
<tr>
<th>Emp ID</th>
<th>Name</th>
<th>DateOfBirth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:limitRows">
<td>{{employee.employe_id | number:0}}</td>
<td>{{employee.name | uppercase}}</td>
<td>{{employee.dob | date:"dd/MMM/yyyy"}}</td>
<td>{{employee.gender | lowercase}}</td>
<td>{{employee.salary | currency:"Rs.":2}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Download for demo files of Two way binding AngularJS

Published by Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com

Join the Conversation

2 Comments

  1. What is difference between angular 1,2 and 4?? can you please explain and elaborate with example if you know about that??

    1. The difference between 1 and 2 is very different. If you are a beginner and think where should you start then go directly with Angular 2. Whereas Angular 2 and Angular 4 is not that different only few features are added. You can go for youtube videos for Angular 2 tutorials.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.