Ng-Bind-3

 

Lets try to understand Ng-bind with dynamic calculation, so we are going to add two number which will be input by user, taking two textbox and assigning them ng-model="val1" and ng-model="val2" and the default value of val1 and val2 is 0 as $scope.val1 = 0; $scope.val2 = 0; Also created one function "sum" which will be called on-change of textboxes so once user type in textbox sum, fuction gets called which will add the val1 and val2 and store in the $scope.result variable and this variable is bind with the span below the textboxes.


 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> value1: <input type="number" ng-model="val1" ng-change="sum()" /> value2: <input type="number" ng-model="val2" ng-change="sum()" /> <br /> <b>Sum:</b> <span ng-bind="result"> </span> </div> <script> var app = angular.module("myApp", []); app.controller('myController', ['$scope', function ($scope) { $scope.val1 = 0; $scope.val2 = 0; $scope.sum = function () { $scope.result = ($scope.val1 + $scope.val2); } }]); </script> </body> </html>
Output