Introduction
In my previous article I explaiined Controllers in AngularJS.
In this article I will show you how to pass an argument in the Controller of AngularJS.
Let's create an application that will help you understand how arguments are passed in the Controller of AngularJS.
Step 1
First of all you need to add AngularJS to your application, for this you need to download it's external .js file that can be downloaded from the AngularJS official website, or you can download the Zip file provided at the top of this article or you can click on this link: AngularJS.
Now add this external file in the Head section of your application as in the following:
<head>
<script src="angular.min.js"></script>
</head>
Step 2
Now I will work on the ViewModel or Script part of this application.
<script>
function carcontrol($scope) {
$scope.notgood = 'Not so Good';
$scope.cartest = 'Awesome';
$scope.test1 = function (cartest) {
$scope.cartest = cartest;
}
};
</script>
Here carcontrol is the controller of this application, in this Controller the initial state of $scope is defined as "Awesome" defined in cartest.
"Not so Good" can also be termed as an initial state but it is used as the initial state in the TextBox that you will see later in this article.
Then a function is created named test1, this is taking cartest as it's argument.
Now the work on ViewModel is completed, now we just need to work on the View part.
Step 3
Now I will work on the View part or the design part of this application, I'll add two buttons and a few Labels that will help us to show the Demonstration in an easy way.
<body>
<div ng-controller="carcontrol">
<input ng-model="notgood" />
<h2>How Do You Like The Car??</h2>
<h3>This Car is {{cartest}}</h3>
<button ng-click="test1('Really Good')">Good</button>
<button ng-click="test1(notgood)">Not Good</button>
</div>
</body>
Here a div is taken in which the controller is called, in this Div a TextBox is taken to which "notgood" is bound using the ng-model. As I told you in Step 2, an initial value is passed in the notgood, so our TextBox will show this initial value on running the page.
After this cartest is bound to the H3, that will help us to show what selection is made by the user because the value of this H3 tag will change depending on the change of selection made by the user.
Then two buttons are used, in the first button a static value is passed when the binding is done to the test1, so a click of this button will pass this static value to the H3 tag.
Now our application is created and can be run to check how it's working.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
function carcontrol($scope) {
$scope.notgood = 'Not so Good';
$scope.cartest = 'Awesome';
$scope.test1 = function (cartest) {
$scope.cartest = cartest;
}
};
</script>
</head>
<body>
<div ng-controller="carcontrol">
<input ng-model="notgood" />
<h2>How Do You Like The Car??</h2>
<h3>This Car is {{cartest}}</h3>
<button ng-click="test1('Really Good')">Good</button>
<button ng-click="test1(notgood)">Not Good</button>
</div>
</body>
</html>
Output
On running the application the default values will be seen by the user.
![passing argument in AngularJS]()
Now if the user clicks on the first button then the value of H3 will change depending on the value bound to this button.
![passing argument in AngularJS]()
Now If I click on the second button then whatever value is passed through the TextBox will be shown in the H3.
![passing argument in AngularJS]()
Now I am changing the value in the TextBox, you can see that the value of H3 is changed accordingly.
![Passing Argument in AngularJS]()