Using Functions in AngularJS Controller

Nitin
8y
2.6k
0
0
25
Blog

So far we have covered the following directives in AngularJS:

If you are new to Controllers in AngularJS I would recommend you to go through this article. I hope you are clear with the basics of controllers now in AngularJS. Now let us see how we can use functions in Controllers.
Copy the below code in a HTML file.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myAngularApp" ng-controller="Ctrl">
City: <input type="text" ng-model="city"><br><br><br> Country: <input type="text" ng-model="country"><br><br><br> Result: {{output()}}
</div>
<script>
var app = angular.module('myAngularApp', []);
app.controller('Ctrl', function($scope)
{
$scope.city = "Mumbai";
$scope.country = "India";
$scope.output = function()
{
return $scope.city + " " + $scope.country;
}
});
</script>
</body>
</html>

We have created a function in which we have concatenated the two variable using scope object. This function name is called to display the desired output.