AngularJS has some built-in directives, and these directives allows us to extend HTML element.
Here we are going to discuss about the two directive that are used for data binding. One is ng-model and second one is ng-bind
Data binding is one of the most important feature of AngularJS. And ng-model and ng-bind are frequently used directives for that.
ng-model: It is used for two way data binding i.e. from view to model and from model to view. Below example code will explain how to use ng-model with an input tag and how we can bind this with the model.
<!doctype html>
<html ng-app>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Enter your name:</label>
<input type = "text" ng-model = "username" placeholder = "Enter Your name">
<br />
<h1>Hello {{username}}!</h1>
</div>
</body>
</html>
ngModel can be used with controls like checkbox, text as these controls have value attribute.ng-model uses formatters to modify the data.
ng-bind: It is also used for data binding but the difference is that it supports one-way data binding i.e. from model to view.It binds only the text content not the value that is why ng-bind is used where we need to display the data
The ngBind attribute tells AngularJS 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.
<!doctype html>
<html ng-app>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Enter your name:</label>
<input type = "text" ng-model = "username" placeholder = "Enter Your name">
<br />
Hello <span ng-bind="username"></span>!
</div>
</body>
</html>
ng-bind can not be used with input tag, we can use it with span or div tag. ngBind uses filters to modify the data.
For Example:
<span ng-bind="username | uppercase"></span>
or
<span>{{username | uppercase}}</span>
0 Comment(s)