Web
Analytics
AngularJS Binding and Expressions with example | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Expressions are used to bind application data to HTML Template. They are pure JavaScript expressions.Expressions are written inside double curly braces such as in {{ expr }}.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body ng-app="" ng-init="qty=10;cost=12">
    <input type="number" name="txt1" ng-model="qty" value=" " /><br />
    <input type="number" name="txt2" ng-model="cost" value=" " /><br />
    <span>{{qty*cost}}</span>

    <!-- String Handling -->
    <div ng-init="fname='yogesh';lname='sharma'">
        <input type="text" name="txt3" ng-model="fname" value=" " /><br />
        <input type="text" name="txt4" ng-model="lname" value=" " /><br />
        <span>{{ fname+' '+lname }}</span>
    </div>

    <!--Array Handling-->
    <div ng-init="items=[10,20,30,40,50]">
      
        <span>{{ items[1]+items[4] }}</span>
        <mark>loop</mark>
        <div ng-repeat="i in items">
            <span>{{i}}</span>
        </div>
    </div>

    <!-- AngularJS Objects-->
    <div ng-init="person={fname:'yogesh',lname:'sharma'}">

        <span>{{person.fname+' '+person.lname}}</span><br />
        <span ng-bind="person.fname"></span>
    </div>

    <!--Object Arrays-->

    <div ng-init="person=[{fname:'yogesh', lname:'sharma'},{fname:'vikas', lname:'sharma'},{fname:'harsh', lname:'sharma'}]">
    <span>{{person[1].fname}}</span>
    <mark>loop on object</mark>
    <div ng-repeat="objvalue in person[2]">
        <div>{{objvalue}}</div>

    </div>
        <mark>Advanced loop on object</mark>

        <div ng-repeat="(key,value) in person[2]">
            <div>{{key}}:{{value}}</div>

        </div>
    <mark>More Advanced Loop on object array</mark>
    <div ng-repeat="p in person">
        <div ng-repeat="c1 in p ">

            <div>{{c1}}</div>
        </div>

    </div>


    </div></body>
</html>

Download Source Code