Menu ▼


ng-bind directive in AngularJS

The ng-bind directive will replace the HTML element text with evaluated value of given expression. if the bind expression or variable value changed the control value also changes.

Syntax:
<span ng-bind="Qty"></span>

Example:
In this example we will bind Quantity, Unit Price, Total Price using ng-bind instead of {{ expression }}
Enter Quantity :
Enter Unit Price :

Quantity :
Unit Price :
Total Price :

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="SampleApp" ng-controller="SampleCntrl">
        <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 : <span ng-bind="Qty"></span>
        <br />
        Unit Price : <span ng-bind="UnitPrice"></span>
        <br />
        Total Price : <span ng-bind="Qty*UnitPrice"></span>
        <br />
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.Qty = 5;
            $scope.UnitPrice = 6;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com