AngularJS ng-bind Directive

The AngularJS ng-bind directive replaces the content of an HTML element with the value of a given variable, or expression. If you change the value of the given variable or expression, AngularJS changes the content of the specified HTML element as well as.

It is an alternative to the interpolation directive.

Syntax:

As attribute:

As CSS class:

Parameter explanation:

expression: It specifies a variable, or an expression to evaluate.

Let's take an example to demonstrate ng-bind directive.

See this example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ng-bind example</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="bindExample">
  <script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'JavaTpoint';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>
</body>
</html>

Test it Now

Next TopicAngularJS ng-bind-html Directive

← prev next →