Showing and hiding elements on a page is an extremely common goal that many developers want to implement, for a wide variety of reasons. In this post, I’ll talk a little bit about how to do just that based on user actions with AngularJS.
Side note: coming from the world of jQuery and element binding/DOM manipulation, I initially found something as simple as this to be tricky, mainly due to the lack of straightforward examples. Hopefully this post will help others who are in the same boat as I was.
Before we implement anything, let’s go over the definitions of the various directives that we’ll be using. There are many different ones you can take advantage of when it comes to hiding and showing elements on a page, but we’ll just cover a few of the most basic.
ng-click is one of the most commonly used directives, which works exactly the way you think it would- it fires an event every time you click on a particular element. It’s used like this:
ng-mouseenter will trigger an event when the mouse cursor enters the element from somewhere outside the element (from say a parent or grandparent element).
ng-mouseleave will trigger an event when the mouse cursor leaves the element from inside the element.
ng-mouseleave are typically used in conjunction with one another.
ng-mouseover will trigger an event when the mouse cursor hovers over the element. Can originate from a parent or child element.
ng-mouseout will trigger an event when the mouse cursor hovers away from the element.
ng-mouseout are typically used in conjunction with one another.
Any of the above mouse directives can be used like this:
In short, a
mouseover event occurs when you hover over an element from either a parent (or grandparent) or child (or grandchild) element, while a
mouseenter event only occurs when you hover over it from either a parent (or grandparent) element. This means that typically
mouseover events fire more than
mouseenter events, for example.
These are the two directives we’ll be using to, you guessed it, show and hide the elements based on some action directive from above. They take in some boolean variable or expression that evaluates to boolean.
Okay, okay- so you understand how those directives work. Let’s put them to use. Here, we’ll create a table that shows and hides elements when a particular table row is hovered over, thereby incorporating everything we’ve learned thus far.
So what’s going on here? When we hover over a table row (
tr element), the
hover() function gets called, which then toggles
fruit.showDelete (our boolean variable which controlls showing & hiding the delete button). Clicking on the delete button then sets the
fruit.show boolean variable to
false, which then hides the row. See the JSFiddle below. (Also note that we’re using the
ng-repeat directive here to generate the rows in the table and the currency filter for
So there you have it- we managed to create a simple table that shows/hides rows based on user actions. This is just a small taste of the kinds of things that AngularJS can help you do. Shameless plug: my company, Iterable, makes heavy use of Angular in our app’s front-end, and we’re hiring developers!