Blog for web designers

Two way binding in AngularJS

Two way binding in AngularJS

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

Santosh Shah

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


Reader Comments

    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 Reply

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.