Handling Click Event In AngularJS

In the previous few blog posts we have been exploring the different aspects of AngularJS framework. In today's post we will explore how to handle different user interaction to events such as button's click event. If you directly arrived here and want to get basic understanding of AngularJS, please refer to following posts.

• Getting Started With AngularJs
• Basic Data Binding With AngularJs
• Binding JSON list in AngularJS

Again, I am going to work with the previously created sample and build today's demo on top of that. So let's get started.

Adding a button click Event ng-click

Let's modify our view to have a new button as following. AngularJS providers bunch of directives for handling different events. In this case we are trying to handle the click event of the button so the directive we will be using is ng-click.

   <button ng-click="showAlert()">Add User</button>

By using the ng-click directive, what we are doing here is telling AngularJS to look out for the click event on the button and when that happens, execute the function named showAlert() defined into the current scope (Which happens to be our DemoController).

Let's go ahead and define this function our controller.

$scope.showAlert = function () {
    alert('Hi, From the Button')
}

Launch the page in the browser, and click the button. No surprise, you will see and alert box as below because that's what the showAlert() function is doing.

Reference for the future posts

Let's make this very simple sample a little more interesting and trying adding the new users into our users JSON array we created in the previous blog post. Basically we will add an input field on the view and when you click our new Add User button, will take the value and update the users list object.

Let's modify our View to have input field right next to the button. Notice that I am using ng-model directive on the input field that will help us pick up the value in our Controller. You can read more about that in my previous blog on data binding.

    <input ng-model="newUser" />
    <button ng-click="showAlert()">Add User</button>

Now let's go ahead and update our showAlert() function to actually get the value that comes from ng-model="newUser". I also needed a small function to get Max value of Index property so I have borrowed a small function from the web that gives us max index value and we +1 it before pushing our new object into $scope.users object.

Get Max Value From JSON Array Object

function getMax(arr, prop) {
    var max;
    for (var i = 0 ; i < arr.length ; i++) {
        if (!max || parseInt(arr[i][prop]) > parseInt(max[prop]))
            max = arr[i];
    }
    return max.index;
} 

And following is how our showAlert() function looks now.

$scope.showAlert = function () {        
    var nextIndex = getMax($scope.users,'index') + 1;
    $scope.users.push({ name: $scope.newUser, index: nextIndex });
}

Okey, looks like everything has been setup. Let's run the page and try adding few users.

And this will be the conclusion of this blog post. The last part was a good exercises for us to refresh our memories on all the basic aspects of AngularJS

Working with $scope variables in AngularJS Working with ng-repeat,ng-model & ng-click attributes in AngularJS Integrating all of the above to create almost fully functional page using AngularJS

That's it for now. Happy coding !