AngularJS ng-bind

The ng-bind directive in AngularJS used to bind the expressions with data.
Here the ngbind is used to do two way data binding in AngularJS.
If the value of the given data is changed then it will be synchronized with expression and vice versa.
Instead of using ng-bind directly, we can use double curly bracket like {{expression}}.
ng-bind is preferable to use, before the compilation of the AngularJS a pattern is temporarily displayed in the browser.
ng-bind makes the bindings invisible to the user when the page is loading. Hence the ng-bind is consider as an element attribute.

Syntax for ng-bind directive in AngularJS:

<element ng-bind="expression"></element>

Parameter Values:

Value	Description
expression	Denotes a variable, or an expression to evaluate.

Sample coding for ng-bind directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="" ng-init="myText='Welcome to Wikitechy.com'">
            <p ng-bind="myText"></p>
        </div>
    </body>
</html>

ng-bind directive declaration in AngularJS:

<div ng-app="" ng-init="myText='Welcome to Wikitechy.com'">
<p ng-bind="myText"></p>
</div>

Code Explanation for ng-bind directive in AngularJS:

The ng-app specifies the root element (e.g. <body> or <html> or <div> tags) to define AngularJS application.
The ng-init is used to initialize the values for an application.(here the value Welcome to Wikitechy.com is point out for “mytext”)
The ng-bind is used to bind the AngularJS values and get the value from to the HTML Document. AngularJS will automatically update the text from the “text” variable.

Sample Output for ng-bind directive in AngularJS:

The content Welcome to Wikitechy.com is displayed in the output.

PDF

AngularJS ng-bind

Syntax for ng-bind directive in AngularJS:

Parameter Values:

Sample coding for ng-bind directive in AngularJS:

ng-bind directive declaration in AngularJS:

Code Explanation for ng-bind directive in AngularJS:

Sample Output for ng-bind directive in AngularJS:

Related Searches to angularjs ng-bind directive

Wikitechy

Join our Community

Other Languages