Passing Argument in the Controller of AngularJS

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>

</head>

Step 2

Now I will work on the ViewModel or Script part of this application.

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>

<h3>This Car is {{cartest}}</h3>

</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:

<head>

function carcontrol($scope) {

$scope.notgood = 'Not so Good';

$scope.cartest = 'Awesome';

$scope.test1 = function (cartest) {

$scope.cartest = cartest;

}

};

</script>

</head>

<body>

<h3>This Car is {{cartest}}</h3>

</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

3 Comments

Join the conversation! Your thoughts help the community grow.

raju saratkar11y ago
<script> var app = angular.module('myApp', []); app.controller('carcontrol', function($scope) { $scope.notgood = 'Not so Good'; $scope.cartest = 'Awesome'; $scope.test1 = function (cartest) { $scope.cartest = cartest; } }); </script>
p kumar11y ago
Hi, I am not getting the result as excepted.. I see output as This Car is {{cartest}} ... even after clicking the button..
- Anubhav Chaudhary11y ago
  That's because your code is having some kind of bug, it might be possible that you have not provided the angularjs file or if google api is called then your net is not working. You can check your console, you will be getting error their. Check console and then try to remove the bug, if not possible then let me know what you are getting in the console.