Show and hide elements with AngularJS

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.

Directives for hiding & showing elements

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
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-click example 1
1
<a ng-click="foo()">Click to execute the function named foo()</a>
ng-click example 2
1
2
3
4
5
6
<table>
<tr ng-click="bar()">
<td>My table data</td>
<td>Clicking on this entire row will fire bar()</td>
</tr>
</table>

###ng-mouseenter

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
ng-mouseleave will trigger an event when the mouse cursor leaves the element from inside the element.

ng-mouseenter and ng-mouseleave are typically used in conjunction with one another.

###ng-mouseover

ng-mouseover will trigger an event when the mouse cursor hovers over the element. Can originate from a parent or child element.

###ng-mouseout

ng-mouseout will trigger an event when the mouse cursor hovers away from the element.

ng-mouseover and ng-mouseout are typically used in conjunction with one another.

Any of the above mouse directives can be used like this:

Mouse event directives example 1
1
2
3
<div ng-mouseenter="doSomething()" ng-mouseleave="doSomethingElse()">
<p>My div content</p>
</div>
Mouse event directives example 2
1
2
3
<div ng-mouseover="doSomething()" ng-mouseout="doSomethingElse()">
<p>My div content</p>
</div>

When do I use mouseenter vs mouseover?

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.

###ng-show and ng-hide
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.

Show and hide directives example 1
1
2
3
<div ng-show="true">
This will always show.
</div>
Show and hide directives example 2
1
2
3
<div ng-hide="true">
This will never show.
</div>
Show and hide directives example 3
1
2
3
<div ng-show="fruit.show">
This will show if fruit.show (located in our controller) is true. If false, it will be hidden.
</div>

The Implementation

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.

The HTML + AngularJS Directives

undefined

The AngularJS controller

AngularJS controller code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function FruitCtrl($scope) {
$scope.fruits = [{
"id": 1,
"name": "Apple",
"price": .50,
"count": 213,
"showDelete": false,
"show": true
}, {
"id": 2,
"name": "Orange",
"price": .45,
"count": 665,
"showDelete": false,
"show": true
}, {
"id": 3,
"name": "Banana",
"price": .60,
"count": 146,
"showDelete": false,
"show": true
}, {
"id": 4,
"name": "Kiwi",
"price": .80,
"count": 199,
"showDelete": false,
"show": true
}];
$scope.hover = function(fruit) {
// Shows/hides the delete button on hover
return fruit.showDelete = ! fruit.showDelete;
};
$scope.delete = function(fruit) {
// Hides a row of fruit, if the delete button was clicked
alert("Deleting the " + fruit.name);
return fruit.show = false;
};
}

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 fruit.price.)

JSFiddle

Wrap-up

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!

Sources