AngularJS ng-bind Directive with Example

  Total Views : 840
  Comments : 0
 
  Keywords : What is ngbind directive in angularjs, How to use angularjs ngbind directive in application, Angularjs ngbind directive to bind data to html element with example

Here we will learn ng-bind directive in angularjs with example and how to use ng-bind directive in angularjs applications with example.

AngularJS ng-bind Directive

“ng-bind” as the name suggest is used to bind/replace text content of any particular HTML element with the value of 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 given expression will change in angularjs ngbind directive.

Syntax of 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 this ng-bind directive in angularjs application with complete example

Example of AngularJS ng-bind Directive

Following is the example of using ngbind directive in angularjs application.

 

Live Preview

<!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

Output of AngularJS ng-bind

Following is the result of using ng-bind directive in angularjs applications.

 

Angularjs ngbind directive example output or result

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User