Pitch your project

Random text






Blogs

0    
By admin Category HTML, Posted October 16th, 2016
AngularJS Events

Today I am writing a blog about the Angular events. When you are writing code with the AngularJS framework, it is very useful to add AngularJS event listeners to your HTML elements. Angular has a lot of directives which you can use in your HTML page. In this blog I will give you an example how you deal with this kind of directives. Here are a couple of AngularJS directives:

  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover

Click here if you want to see a list of all directives

Programming will be a lot easier when you use this directives.

The events allows us to run AngularJS functions at certain user events. You can add mouse events on any HTML element.
The first example will be a ng-click mouse event.
If you want to run a piece of code only when you are clicking on a specific button you can use the ng-click event. For example: you have an application where you can post whatever you like and want to count how many thumbs up you get on your post, you can use it. In a situation like this you use the ng-click event.If you click on the button the count will be increased by one each time when clicking the button.

Code
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click Me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});

You will often use the ng-click when you are making an application with the AngularJS framework.

The second example I would like to show you is the ng-repeat. Which you can use if you have an array with a couple of names in it, and you want to show all of the names.
In this situation you can use the ng-repeat to show the names on the screen.

Code
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="name in names">
      {{ name }}
    </li>
  </ul>
</div>
Result
Looping with ng-repeat:

* Jani
* Hege
* Kai

As you can see, all the names in the array will show up with the ng-repeat. I will recommend that you take a singular item out of the multiple item u have in the array (like we have : name in names). This will make it more readable for everyone who is looking at your code. This will also gives you a good overview for yourself.

Posted by Nando Veenendaal

Leave a Reply

Your email address will not be published. Required fields are marked *