Here we will learn ng-bind directive in angularjs with example and how to use the ng-bind directive in angularjs applications with example.
In angularjs, the ng-bind
directive is used to bind/replace the text content of any particular HTML element with the value of a given expression that is used against the ng-bind
in angularjs application. The value of the specified HTML element will be updated whenever the value of the given expression will change in angularjs ng-bind
directive.
Following is the syntax of using ng-bind
directive in angularjs applications.
<div ng-app="">
Enter Name to Display:
<input type="text" ng-model="name">
you entered : <span ng-bind="name"></span>
</div>
We will see how to use ng-bind
directive in angularjs application with complete example.
Following is the example of using ng-bind
directive in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs ng-bind Directive Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularbindApp", []);
app.controller("Angularbindctrl", function ($scope) {
$scope.name = "";
});
</script>
</head>
<body ng-app="AngularbindApp">
<div ng-controller="Angularbindctrl">
Enter Name to Display :
<input type="text" ng-model="name"><br />you entered : <span ng-bind="name"></span>
</div>
</body>
</html>
When we run above code we will get output like as shown below
Following is the result of using ng-bind
directive in angularjs applications.