Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | angular.bind() Function

  • Last Updated : 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=
      </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: 
 

bind



After Input: 
 

bind

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: 
 

bind

After Input: 
 

bind

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :