AngularJS | angular.bind() Function
The angular.bind() Function in AngularJS is used to bind the current context to a function, but actually execute it at a later time. It can also be used in Partial Applications. Partial Applications is when you want to make a function but some of the arguments have been passed already.
Syntax:
angular.bind(self, function, args);
Parameter Values:
- self: This refers to the context in which the function should be evaluated.
- function: It refers to the function to be bound.
- args: It is used to prebound to the function at the time of function call. It is an optional argument.
Example 1:
html
<html> <head> <title>angular.bind()</title> <script src= </script> </head> <body ng-app="app" style="text-align:Center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>angular.bind()</h2> <p>Input number to sum with 5: <div ng-controller="geek"> <input type="number" ng-model="num" ng-change="Func()" /> <br>Sum = {{Add}} </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { $scope.num = 0; $scope.Func = function () { var add = angular.bind(this, function (a, b) { return a + b; }); $scope.Add = add(5, $scope.num); } }]); </script> </body></html> |
Output:
Before Input:
After Input:
Example 2:
html
<html> <head> <title>angular.bind()</title> <script src= </script> </head> <body ng-app="app" style="text-align:Center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>angular.bind()</h2> <div ng-controller="geek"> Input A: <input type="number" ng-model="val1" ng-change="GetResult()" /> <br><br> Input B: <input type="number" ng-model="val2" ng-change="GetResult()" /> <br /><br> {{result}} </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { function isEqual(a, b) { if (a == b) { return "Inputs are equal." } else if (a >= b) { return "A is greater than B." } else if (a <= b) { return "A is lesser than B." } } $scope.GetResult = function () { var result = angular.bind(this, isEqual); $scope.result = result($scope.val1, $scope.val2); } }]); </script> </body></html> |
Output:
Before Input:
After Input:
