Beginning AngularJS

CHApTer 5 ■ DIreCTIveS

The ng-hide class is very simple and nothing more than a single CSS rule, as follows.

.ng-hide{
display: none !important;
}

As you might imagine, the ngHide directive does the exact opposite. The following example achieves the same
result as the previous example, but by asking the question in a different way. Here, the text within the p element is
hidden when $scope.correctAnswer is not true.

That answer is correct!

ngRepeat

The ngRepeat directive is definitely one of the most useful built-in directives. It is, essentially, a looping construct that
instantiates a template once for every item in a collection (for example, an array). It also has a number of useful built-
in variables, which are shown in Table 5-1.

Table 5-1. ngRepeat Built-in Variables

Variable Name Type Description

$index Number Iterator offset of the repeated element (0..length-1)

$first Boolean True, if the repeated element is first in the iterator

$middle Boolean True, if the repeated element is between first and last in the iterator

$last Boolean True, if the repeated element is last in the iterator

$even Boolean True, if the iterator position $index is even (otherwise, false)

$odd Boolean True, if the iterator position $index is odd (otherwise, false)

Let’s have a look at a code listing (Listing 5-5) that puts ngRepeat and some of these built-in variables to use.

Listing 5-5. Using ngRepeat with Some of the Built-in Variables

My Favourite Cities

The output can be seen in Figure 5-3. The $index variable gives us the row numbers, and we use $first and
$last to output conditionally, whether or not we are on the first or last row, respectively. The most important thing to
understand about this ngRepeat example is the format of the expression with which we provide it.

"city in ['Liverpool','Perth','Sydney','Dublin','Paris']"