AngularJS – Two Different Ways to Bind Model Data to HTML Element

0
This article represents two different techniques using which application data (model) could be bound to HTML element in AngularJS. Either of the technique is used to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Following are the key points described later in this article:

  • Bind data using {{ expression }} syntax
  • Bind data using ng-bind directive
  • Recommended way of binding data
Bind Data using {{ expression }} Syntax

Following is the sample code representing curly-braces way:

<h1>Hello, {{name}}</h1>		

Pay attention to curly braces used to bind the data. You could copy and paste the code below consisting of above code snippet and test in your browser.

<html>
<head>
	<title>AngularJS - Form Template</title>
	<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
	<h1>Hello, {{name}}</h1>
	<hr/>
	<form class="form-horizontal" role="form">
	  <div class="form-group">
	    <label for="name" class="col-sm-2 control-label">Name</label>
	    <div class="col-sm-4">
	      <input type="text" class="form-control" id="name" ng-model="name" placeholder="Name">
	    </div>
	  </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-primary">Submit</button>
	    </div>
	  </div>
	</form>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
	<script type="text/javascript">
		angular.module('HelloApp', [])
			.controller('HelloCtrl', ['$scope', function($scope){
				$scope.name = "Calvin";
			}])
	</script>
</body>
</html>
Bind Data using ng-bind Directive

Following represents the technique used to bind the data using ng-bind directive:

<h1>Hello, <span ng-bind="name"></span></h1>	

You could replace the above code snippet data in the HTML page code given above and test for yourself.

 

Recommended way of Binding Data

At times, when loading the page, the expression is displayed in its raw form before Angular compiles the expression. To avoid this scenario, it is recommended to use ngBind instead of {{ expression }}. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

Hope this article helped you in getting an understanding on how to bind data to HTML. Please feel free to comment or share.
Ajitesh Kumar

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc.Recently, he has been digging deep into the field of data science and machine learning.

Follow him on Twitter and Google+.
Ajitesh Kumar

Leave A Reply