Search within TutorialsPark

AngularJS Filters: Collection Filters

Learn how to use AngularJS Filters for filtering a Collection of Values.

AngularJS Filters: Collection Filters

The AngularJS Filters can be used to filter a Collection of Values just as we used them to Filter Single Data Values. But Filtering Collection values requires a lot of care and attention to detail.

AngularJS provides three built-in filters which are used to filter Collection Values. 1. limitTo , 2. filter and 3. orderBy

AngularJS Collection Filters: Limit the Number of Items

The AngularJS Filter of limitTo is used to assign a restriction on the number of items to displayed from the source data. This filter is useful if there is space constraint or to display only limited number of items.

In the demo, we have used the filter limitTo along with property studentLimit, defined within the controller function. The filter is applied on the directive ng-repeat so that it repeats only for the given number of times as specified by the filter.

Example: AngularJS Collection Filters limitTo Filter

Give it a TRY! » Note:The orignal data remains unaffected, simply the view is modified.

AngularJS Collection Filter : Select Elements using filter

AngularJS provides a filter to Select elements from a collection using the filter filter, the name is a bit confusing.

The criteria for selection can be specified using an expression in form of a map object inorder to match element values, you can also use a function

In the demo, we have used a map object to select students belonging the department Arts, the scope behaviour selectArts is called for every items within the collection.

Example: Angular Collection Filters Select Elements using a Filter

Give it a TRY! » Note:The elements for which the filter return true are displayed

AngularJS Collection Filters : Sorting Elements

AngularJS provides a built-in filter called orderBy, is used to sort the elements within the array based on the name of the property specified.

In the demo, we have used the property fees to sort the element within the array.

Example: Angular JS Collection Filters Sorting Elements

Give it a TRY! » Note:The items are sorted in the ascending order of fees, the value must be within quotes

AngularJS Collection Filters : Setting the Direction of Sort

The AngularJS sort Filter sortBy by default sorts the specified property in the ascending order(i.e low to high), but the user has an option to set the order using the symbol +(for ascending order) and (- for descending Order)

Example: AngularJS Collection Filters Setting the Direction of Sort

Give it a TRY! » Note:Using the symbol ( + ) has no effect, since that is the default direction or sort.

AngularJS Collection Filters : Sorting using a Function

The AngularJS filters of orderBy can also sort element using a function, enabling you to sort elements in various forms and not simply using single property values.

An object from the source data is passed to the function used for sorting, it returns an object which then can be used to compare elements while sorting.

In the demo, the function sorts the elements in ascending order based on property fees, but elements with value of examDate less than 4 are left untouched.

Example: AngularJS Collection Filters Sorting using a Function

Give it a TRY! » Note: While invoking the function from the ng-repeat, the name of function should not be within quotes.

AngularJS Collection Filters : Sorting with multiple types of Declaration

The AngularJS Filter sort filter orderBy can be declared in multiple way, so that if two elements have same value for a property, they can be compared based on some other property.

In the demo, we have first sorted the element using a function from last example and then used to the property fees to arrange them in descending order.

Example: AngularJS Collection Filter Sort using Multiple types of Declarations

Give it a TRY! » Note: There are two declaration, the first is the function while second orders the result in descending order.

AngularJS Collection Filters : Chaining Multiple Filters

The AngularJS filters can be combined with other filters to create a complex filter, producing completely different effect than the individual filters.

To chain multiple filters together, use the bar ( | ) symbol. The filters are evaluated in the direction left to right.

Example: AngularJS Collection Filter Chaining Multiple Filters

Give it a TRY! » Note:The first filter is orderBy to sort, and the result is restricted using limitTo filter.