Mar
Ng Model & Ng Bind in Angularjs…How are they different?
When it comes to Front-End Development, Angularjs can be the indispensable framework for building creative components of the website. And you would have heard of Data Binding, right? Data Binding refers to the combination of establishing a connection between the application UI and business logic.
Moreover, Data Binding in Angularjs consists of a couple of directives where everyone gets confused. Obviously, both have distant advantages and for diverse purposes altogether.
This article is completely designed to make you recognize the differences between them.
Ng-model
Ng-model or data-ng-model directive in Angular is the best way to bind the variables together. This is actually used as a two-way binding.
You will have an input component, and the value updated into that field must be reflected in other parts of the application. The better solution is to bind a variable to that field and output that variable wherever you wish to display the updated value throughout the application.
However, if you make any change in a single variable it can reflect in other places too. So the value must be updated in corresponding places as well!
This is actually achieved in case of using ng-model directive..!
To make it more clear, you can find the example here:
<script>
//Creating Angular Module
var helloApp = angular.module('helloApp', []);
//Creating Controller with Data
helloApp.controller(’employees Ctrl
‘, function($scope) {
$scope.search=”Enter Search Criteria”;
});
</script>
<body>
<!– Creating input component and attaching to ng-model –>
Search : <input type=”text” ng-model=”search”><br><br>
<b>Search Term:</b>{{search}}
</body>
In the above example, the variable “search” bound with an input component. When it is first assigned with a value using “$scope.search”, it is passing the value from a variable to the input component.
Later when the user updates the value in the field, expression {{search}} output the value from the input component to variable.
Ng-bind
This is different from ng-model. While ng-model is b-two-way binding, this is a single way binding used for displaying the value inside HTML component as innerHTML.
This directive is not only meant to be used with the HTML content but also to bind the component to HTML elements.
This directive is very valuable for updating the blocks like div, span, etc. with inner HTML content.
Let’s look at the complete example.
<!DOCTYPE html>
<html ng-app="helloApp" ng-controller="employees Ctrl">
<head>
<title>AngularJS - ng-model vs ng-bind</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
//Creating Angular Module
var helloApp = angular.module('helloApp', []);
//Creating Controller with Data
helloApp.controller(’employees Ctrl’, function($scope) {
$scope.search=”Enter Search Criteria”;
});
</script>
</head>
<body>
<!– Creating input component and attaching to ng-model –>
Search : <input type=”text” ng-model=”search”><br><br>
Search ng-bind: <input type=”text” ng-model=”searchBind”><br><br>
<b>Search Term:</b>{{search}}<br><br>
<!–Mapping input component–>
<span ng-bind=”search Bind”></span>
<!–Mapping directly to variable–>
<span ng-bind=”search”></span>
</body>
</html>
Wrap Up
Now your doubts have been cleared we hope! This tutorial would have helped you with examples providing you with a clear perception!
Register your valuable comments in the comments section below!
Happy Reading 🙂
Comments