Menu ▼


ng-init directive in AngularJS

The ng-init directive evaluate an expression and initialize the variables, application data. It is used to set initial values to variables. In our previous article we have initialized the Qty and UnitPrice using module and controller. You can initialize the Qty & UnitPrice variables in Init module also.

Syntax:
<div ng-app="" ng-init="Qty=5;UnitPrice=6;">
</div>

Example:
Enter Quantity :
Enter Unit Price :

Quantity : {{Qty}}
Unit Price : {{UnitPrice}}
Total Price : {{Qty*UnitPrice}}

Source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="Qty=5;UnitPrice=6;">
    <table>
        <tr>
            <td>
                Enter Quantity :
            </td>
            <td>
                <input type="text" ng-model="Qty" /><br />
            </td>
        </tr>
        <tr>
            <td>
                Enter Unit Price :
            </td>
            <td>
                <input type="text" ng-model="UnitPrice" /><br />
            </td>
        </tr>
    </table>
    <br />
    Quantity : {{Qty}}<br />
    Unit Price : {{UnitPrice}}<br />
    Total Price : {{Qty*UnitPrice}}<br />
</div>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com