Iteration
Now we will learn about the directive <ng-repeat>. This directive is used for iterating a collection of data. The ng-repeat directive instantiates a template for each item of the collection. Each template instance gets its own scope. We will use another directive <ng-init> for initializing the collection for ng-repeat directive. Let's see the following code snippet:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Learning AngularJS</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="bookList = [
{name:'The Tempest', author:'William Shakespeare'},
{name:'Gitanjali', author:'Rabindranath Tagore'},
{name:'Harry Potter', author:'J. K. Rowling'},
{name:'The Da Vinci Code', author:'Dan Brown'},
{name:'A Brief History of Time', author:'Stephen Hawking'},
{name:'Tell Me Your Dreams', author:'Sidney Sheldon'}
]">
List of books:
<ul>
<li ng-repeat="book in bookList">
{{book.name}} -- {{book.author}}
</li>
</ul>
</div>
</body>
</html>
In the above example, we have
initialized an array of objects bookList
by using <ng-init> directive. Each object has two properties: name and author. To iterate the bookList array, we have used <ng-repeat>
directive. For each object of array bookList,
we bind the value with variable book. The output of browser will be something like:
Filters
Filters are used to format the data that
will be displayed to the user. There are several built-in filters. We can also
create filter of our own. The syntax for using filters is:
{{ expression | filterName :
parameter1 : ...parameterN }}
Here expression is any Angular
expression, filterName is the name of the filter we want to use, and the
parameters of the filter separated by colons. Here is an example of currency
filter:
{{13.7 | currency}}
The output will be: $13.70
There are many types of filters in
AngularJS such as date, number, uppercase, filter, orderBy etc. Filters can be
chained with additional pipe (|) symbols in the binding.
We can use uppercase filter to capitalize a string. For example, the expression {{ "I am learning AngularJS." | uppercase }} will be displayed as: I AM LEARNING ANGULARJS.
The 'filter' filter selects a subset of items from array and returns it as a new array. This filter is generally used as a way to filter out items for display. The filter method takes a string, object, or function that it will run to select or reject array elements.
The 'orderBy' filter orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. The orderBy function can take two parameters: The first one is required, while the second is optional.
{{ orderBy_expression | orderBy :
expression : reverse}}
Here is an
example code snippet by applying various Angular filters we have learnt just
now:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Learning AngularJS</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-init="bookList = [
{name:'The Tempest', author:'William Shakespeare'},
{name:'Gitanjali', author:'Rabindranath Tagore'},
{name:'Harry Potter', author:'J. K. Rowling'},
{name:'The Da Vinci Code', author:'Dan Brown'},
{name:'A Brief History of Time', author:'Stephen Hawking'},
{name:'Tell Me Your Dreams', author:'Sidney Sheldon'}
]">
<br>
List of books:
<br><br>
Search: <input type="text" ng-model="searchString" />
<ul>
<li ng-repeat="book in bookList | orderBy:'name'
| filter:searchString">
{{book.name}} -- {{book.author | uppercase}}
</li>
</ul>
</div>
</body>
</html>
The above code applies the orderBy
filter in name property of the bookList array. There is a input text field
which is bind with searchString
variable. The filter filter takes searchString
as the parameter. And the uppercase filter is used with author property. The browser should
display something like the following:
