AngularJS | angular.bind() Function - GeeksforGeeks

30 Mar, 2021
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=         "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">      </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=          "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">      </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:  
 
simranarora5sos
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?