To make filters interact with the expression, we just need to put them inside double curly brackets:

{{expression | filter}}

Also, the filters can be combined, thus creating a chain where the output of filter1 is the input of filter2, which is similar to the pipeline that exists in the shell of Unix-based operating systems:

{{expression | filter1 | filter2}}

The framework already brings with it a set of ready-to-use filters that can be quite useful in your daily development. Now, let's have a look at the different types of AngularJS filters.

{{ 10 | currency}}

{{ 10 | currency:'R$'}}

<script src="js/lib/angular-locale_pt-br.js"></script>

{{ car.entrance | date }}

{{ car.entrance | date:'MMMM dd/MM/yyyy HH:mm:ss' }}

index.html
<input 
  type="text" 
  ng-model="criteria" 
  placeholder="What are you looking for?"
/>
<table>
  <thead>
    <tr>
      <th></th>
      <th>Plate</th>
      <th>Color</th>
      <th>Entrance</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      ng-class="{selected: car.selected}" 
      ng-repeat="car in cars | filter:criteria"
 >
   <td>
        <input 
          type="checkbox" 
          ng-model="car.selected"
        />
      </td>
      <td>{{car.plate}}</td>
      <td>{{car.color}}</td>
      <td>{{car.entrance | date:'dd/MM/yyyy hh:mm'}}</td>
    </tr>
  </tbody>
</table>

{{ car | json }}

{ 
  "plate": "6MBV006", 
  "color": "Blue", 
  "entrance": "2013-12-09T23:46:15.186Z" 
}

{{ expression | limitTo:10 }}

{{ expression | lowercase }}

{{ 10 | number:2 }}

{{ expression | orderBy:predicate:reverse }}

index.html

<input 
  type="text" 
  ng-model="criteria" 
  placeholder="What are you looking for?"
/>
<table>
  <thead>
    <tr>
      <th></th>
      <th>
        <a href=""ng-click="field = 'plate'; order=!order">
          Plate
        </a>
      </th>
      <th>
        <a href=""ng-click="field = 'color'; order=!order">
          Color
        </a>
      </th>
      <th>
        <a href=""ng-click="field = 'entrance'; order=!order">
          Entrance
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr 
      ng-class="{selected: car.selected}" 
      ng-repeat="car in cars | filter:criteria | orderBy:field:order"
 >
   <td>
        <input 
          type="checkbox" 
          ng-model="car.selected"
        />
      </td>
      <td>{{car.plate}}</td>
      <td>{{car.color}}</td>
      <td>{{car.entrance | date:'dd/MM/yyyy hh:mm'}}</td>
    </tr>
  </tbody>
</table>

{{ expression | uppercase }}

We can also use filters in other components such as controllers and services. They can be used by just injecting $filter inside the desired components. The first argument of the filter function is the value, followed by the other required arguments.

Let's change our application by moving the date filter, which we used to display the date and hour separated in the view, to our controller:

controllers.js
parking.controller("parkingCtrl", function ($scope, $filter) {
  $scope.appTitle = $filter("uppercase")("[Packt] Parking");
});

This approach is often used when we need to transform the data before it reaches the view, sometimes even using it to the algorithms logic.

AngularJS already comes with a bunch of useful and interesting built-in filters, but even then, we'll certainly need to create our own filters in order to fulfill specific requirements.

To create a new filter, you just need to register it to the application's module, returning the filter function. This function takes the inputted value as the first parameter and other additional arguments if necessary.

Now, our application has a new requirement that can be developed through the creation of a customized filter.

This requirement involves formatting the car's plate by introducing a separator after the third character. To achieve this, we are going to create a filter called plate. It will receive a plate and will return it after formatting it, after following the rules:

filters.js

parking.filter("plate", function() {
  return function(input) {
    var firstPart = input.substring(0,3);
    var secondPart = input.substring(3);
    return firstPart + " - " + secondPart;
  };
});

With this filter, the 6MBV006 plate is displayed as 6MB - V006.

Now, let's introduce a new parameter to give the users a chance to change the plate's separator:

filters.js

parking.filter("plate", function() {
  return function(input, separator) {
    var firstPart = input.substring(0,3);
    var secondPart = input.substring(3);
    return firstPart + separator + secondPart;
  };
});

Now, it's time to create our first form in the car parking application. Until now, we have been using the plate of the car in any format in order to allow parking. From now on, the driver must mention the details of the plate following some rules. This way, it's easier to keep everything under control inside the parking lot.

The HTML language has an element called form that surrounds the fields in order to pass them to the server. It also creates a boundary, isolating the form as a single and unique context.

With AngularJS, we will do almost the same thing. First, we need to surround our fields with the form element and also give a name to it. Without the name, it won't be possible to refer to it in the future. Also, it's important to assign a name to each field.

In the following code, we have added the form to our parking application:

index.html

<form name="carForm">
  <input 
    type="text" 
    name="plateField"
    ng-model="car.plate" 
    placeholder="What's the plate?"
  />
</form>

For the form, avoid using the name that has already been used inside the ngModel directive; otherwise, we will not be able to perform the validation properly. It would be nice to use some suffix for both the form and the field names as that would help to make things clearer, thus avoiding mistakes.

The validation process is quite simple and relies on some directives to do the job. The first one that we need to understand is the ngRequired directive. It could be attached to any field of the form in order to intimate the validation process that the field is actually required:

<input 
  type="text"
  name="plateField"
  ng-model="car.plate" 
  placeholder="What's the plate?"
  ng-required="true"
/>

In addition to this, we could be a little more specific by using the ngMinlength and ngMaxlength directives. It is really useful to fulfill some kinds of requirements such as defining a minimum or maximum limit to each field.

In the following code, we are going to add a basic validation to our parking application. From now on, the field plate will be a required parameter and will also have minimum and maximum limits:

<input 
  type="text"
  name="plateField"
  ng-model="car.plate" 
  placeholder="What's the plate?"
  ng-required="true"
  ng-minlength="6"
  ng-maxlength="10"
/>

To finish, we can add a regular expression to validate the format of the plate. This can be done through the ngPattern directive:

<input 
  type="text"
  name="plateField"
  ng-model="car.plate" 
  placeholder="What's the plate?"
  ng-required="true"
  ng-minlength="6"
  ng-maxlength="10"
  ng-pattern="/[A-Z]{3}[0-9]{3,7}/"
/>

The result can be evaluated through the implicit object $valid. It will be defined based on the directives of each field. If any of these violate the directives definition, the result will be false. Also, the $invalid object can be used, considering its usefulness, depending on the purpose:

<button 
  ng-click="park(car)" 
  ng-disabled="carForm.$invalid"
>
  Park
</button>

If the plate is not valid, the following alert should be displayed:

<alert 
  ng-show="carForm.plateField.$invalid"
  topic="Something went wrong!"
>
  The plate is invalid!
</alert>

However, there is a problem with this approach. The alert is displayed even if we type nothing and this might confuse the user. To prevent such situations, there are two properties that we need to understand, which are covered in the next section.

Sometimes, it would be useful to know whether the field was never touched in order to trigger (or not) some validation processes. This can be done by the means of two objects with very suggestive names: $pristine and $dirty.

Pristine means purity, and here, it denotes that the field wasn't touched by anyone. After it's been touched for the first time, it becomes dirty. So, the value of $pristine always starts with true and becomes false after any value is typed. Even if the field is empty again, the value remains false. The behavior of the $dirty object is just the opposite. It is by default false and becomes true after the first value is typed:

<alert 
  ng-show="carForm.plateField.$dirty && carForm.plateField.$invalid" 
  topic="Something went wrong!"
>
  The plate is invalid!
</alert>

In the end, the one that remains is the $error object. It accumulates the detailed list of everything that happens with the form and can be used to discover which field must be proofread in order to put the form in a valid situation.

Let's use it to help our users understand what's exactly going wrong with the form:

<alert 
  ng-show="carForm.plateField.$dirty && carForm.plateField.$invalid" 
  topic="Something went wrong!"
>
  <span ng-show="carForm.plateField.$error.required">
    You must inform the plate of the car!
  </span>
  <span ng-show="carForm.plateField.$error.minlength">
    The plate must have at least 6 characters!
  </span>
  <span ng-show="carForm.plateField.$error.maxlength">
    The plate must have at most 10 characters!
  </span>
  <span ng-show="carForm.plateField.$error.pattern">
    The plate must start with non-digits, followed by 4 to 7 numbers!
  </span>
</alert>