Home > DeveloperSection > Beginner > AngularJs Binding

AngularJs Binding


Angular JS Angular JS  Angularjs Directive  Angularjs Model 
Ratings:
0 Comment(s)
 1243  View(s)
Rate this:

AngularJs Binding

In this article, I’m expaining about the angularjs binding and how to use it.

Start by setting up a div with ng-app directive and include the angular.min.js file using the angulatjs cdn :

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <div ng-app="">

    </div>

</body>

</html>

When you write the ng-app directive in the <div> tag, then it tells you that everything in the <div> is belongs to the angularjs app and its also tells you the scope of the angularjs application.

Binding can be represented in AngularJS using the ng-bind directive or with double curly brackets. We can test this out by trying some expressions in our div:

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <div ng-app="">

        {{3 + 2}}

        {{"Mark" + "David"}}

        {{3 * 9}}

    </div>

</body>

</html>

Let try another example using the ng-bind directive:

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <div ng-app="">

        <label>Firstname : </label>

        <input type="text" ng-model="txtfirstname"/>

       

      <label>Full Name : </label> <span ng-bind="txtfirstname"></span>

    </div>

</body>

</html>

Output:

1.png

As soon as, you typing the content in the textbox, you will see that the value of the textbox is reflecting in Full Name because we have bind the txtfirstname model to the span using ng-bing directive.

Let try another example using two boxes and concatenate their values using the binding in angularjs:

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <h2>AngularJs Binding Example</h2>

    <div ng-app="">

 

        <label>Firstname : </label>

        <input type="text" ng-model="txtfirstname"/>

        <br />

        <br />

        <label>Lastname : </label>

        <input type="text" ng-model="txtlastname"/>

        <br />

        <br />

 

        <label>Full name : </label> {{txtfirstname + " " + txtlastname}}

    </div>

</body>

</html>

 

Output

2.jpg

 


Don't want to miss updates? Please click the below button!

Follow MindStick