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">
    <script src="Scripts/angular.js"></script>
<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 />

    <!-- 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>

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

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

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

    <!--Object Arrays-->

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

        <mark>Advanced loop on object</mark>

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

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




Download Source Code