Description :
Angular.bind will bind to a function which call another function and arguments will also passed from addData, In this example, there are two value one is 5 and another is first time 30 and later it take value form text box which is bind to scope variable num. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="bindController">
<input type="number" ng-model="num" ng-change="AddValue()" />
Addition={{Add}}
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('bindController', ['$scope', function ($scope) {
$scope.num = 30;
$scope.AddValue = function () {
var addData = angular.bind(this, function (a, b) {
return a + b;
});
$scope.Add = addData(5, $scope.num);
}
}]);
</script>
Description :
In this example, angular.bind call function multiply and pass the two value for 5 and 10 and return the output of multiply function. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="bindController">
angular.bind result = {{Mul}}
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('bindController', ['$scope', function ($scope) {
function multiply(a, b) {
return a * b;
}
var mulData = angular.bind(this, multiply, 10);
$scope.Mul = mulData(5);
}]);
</script>
Description :
angular.bind call the function isEqual and value of parameters a and b will passed from textbox. isEqual function return result according to condition. See code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="bindController">
A <input type="number" ng-model="val1" ng-change="GetResult()" />
B <input type="number" ng-model="val2" ng-change="GetResult()" /><br />
{{result}}
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('bindController', ['$scope', function ($scope) {
function isEqual(a, b) {
if (a == b) {
return "Values 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>
Description :
In this example, We have two radio button and it will show shapes according to radio button selection and it checks whether shape is 'circle' or 'square' and it return html of shape. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
</head>
<body ng-app="app">
<div ng-controller="bindController as vm">
Circle <input type="radio" name="shap" ng-model="vm.shap" value="Circle" ng-change="vm.GetResult()" />
Square <input type="radio" name="shap" ng-model="vm.shap" value="Square" ng-change="vm.GetResult()" /><br />
<div ng-bind-html="vm.result"></div>
</div>
</body>
</html>
<script>
var app = angular.module("app", ['ngSanitize']);
app.controller('bindController', ['$scope', '$sce', function ($scope, $sce) {
var vm = this;
vm.GetResult = function () {
var result = angular.bind(this, function (shap) {
if (shap == "Circle") {
return $sce.trustAsHtml("<div style='height:200px;width:200px;border:1px solid black; border-radius:100px'></div>");
}
else {
return $sce.trustAsHtml("<div style='height:200px;width:200px;border:1px solid black'></div>");
}
});
vm.result = result(vm.shap);
}
}]);
</script>