AngularJS Essentials

Creating Reusable Components with Directives
Beyond iterating, we might need to identify which is the first or the last element,
what is its index number, and many other things. This can be achieved by using the
following properties:
Variable Type Details
$index number Number of the element
$first Boolean This is true if the element is the first one
$last Boolean This is true if the element is the last one
$middle Boolean This is true if the element is in the middle
$even Boolean This is true if the element is even
$odd Boolean This is true if the element is odd
The ngModel directive
The ngModel directive attaches the element to a property in the scope, thus binding
the view to the model. In this case, the element can be input (all types), select,
or textarea, as shown in the following code:
There is an important piece of advice regarding the use of this directive. We must
pay attention to the purpose of the field that is using the ngModel directive. Every
time the field is a part of the construction of an object, we must declare the object
in which the property should be attached. In this case, the object that is being
constructed is a car; so, we will use car.plate inside the directive expression.
However, sometimes it may so happen that there is an input field that is just used to
change a flag, allowing the control of the state of a dialog or another UI component.
In this case, we can use the ngModel directive without any object as long as it will not
be used together with other properties or even persisted.
In Chapter 5, Scope, we will go through the two-way data binding concept. It is very
important to understand how the ngModel directive works behind the scenes.
[ 24 ]
www.it-ebooks.info