Hello, friends it this tutorial I am going to explain you about ng-bind in  Angular Js. In the previous session, we have discussed ng-model in Angular Js.

Introduction:

The ng-bind directive is used to display the content of variable or expression inside an HTML element. If any changes in the variable or the expression occur, Angular Js also changes the content of the HTML element. The ng-bind is very much different from ng-model. ng-bind supports one-way data binding. ng-bind is very useful. JavaScript framework supports only one-way data binding.

ng-bind

An example of ng-bind:

<!DOCTYPE html>
<html ng-app="helloApp" ng-controller="employeesCtrl">
<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('employeesCtrl', 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="searchBind"></span>
<!--Mapping directly to variable-->
<span ng-bind="search"></span>

</body>
</html>

Hope you understand about ng-bind in Angular JS.

You must also follow the related links:

Thank You,

One Thought to “ng-bind Directive”

Leave a Comment