Categories: JavascriptWeb

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

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.

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.