AngularJS angular.bind() Function

Read

Discuss

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 Application 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 the function call. It is an optional argument.

Example 1: This example describes the implementation of the angular.bind() Function in AngularJS.

HTML

<!DOCTYPE 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>
    <h3>angular.bind()</h3>
    <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:

Example 2: This is another example that describes the implementation of the angular.bind() Function in AngularJS.

HTML

<!DOCTYPE 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>
    <h3>angular.bind()</h3>
    <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:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 12 Sep, 2022

What are templates in AngularJS ?

JavaScript Know the value of GET parameters from URL

Nov	DEC	Jan
	01
2022	2023	2024

AngularJS angular.bind() Function

HTML

HTML

Please Login to comment...