Repeater

So far we’ve been using single values. Now what if we wanted to display lists of data? This is where the ng-repeat directive comes in. As so often we begin with a rather simple example, which displays a list of movies.

Example

<div style="width:100%" ng-init="movies = [
	{name:'Transformers: Age of Extinction', studio:'Paramount Pictures', gross:'$966,455,028'},
	{name:'The Amazing Spider-Man 2', studio:'Columbia Pictures', gross:'$706,666,005'},
	{name:'X-Men: Days of Future Past', studio:'20th Century Fox', gross:'$739,472,870'}]">

	<table>
		<tr ng-repeat="movie in movies">
			<td>{{ movie.name }}</td>
			<td>{{ movie.studio }}</td>
			<td>{{ movie.gross }} </td>
		</tr>
	</table>
</div>

Play with example »

You can see, that we have a div-element which initializes an array of movies. Next we have a table, which has a tr-element with a ng-repeat-directive. The value in it is movie in movies, which means that it iterates over each line of the movies-array and passes the line to the movie-object. The movie-object in turn can then be used within the expression to show the name, studio and gross.

Let’s add some cool functionality to the grid

So what cool things will we do with the grid? ng-repeat gives you informations about the current line-number ($index), if an element is the first- or last ($first/$last), even or odd ($even/$odd) or in the middle ($middle). Let’s see in another example, how we can use them!

Example

<div style="width:100%" ng-init="movies = [
	{name:'Transformers: Age of Extinction', studio:'Paramount Pictures', gross:'$966,455,028'},
	{name:'The Amazing Spider-Man 2', studio:'Columbia Pictures', gross:'$706,666,005'},
	{name:'X-Men: Days of Future Past', studio:'20th Century Fox', gross:'$739,472,870'}]">

	<table>
		<tr ng-repeat="movie in movies" ng-class="{evenClass:$even, oddClass:$odd}">
			<td>{{ $index + 1 }}</td>
			<td>{{ movie.name }}</td>
			<td>{{ movie.studio }}</td>
			<td>{{ movie.gross }} </td>
		</tr>
	</table>
</div>

Play with example »

Here we’re using the ng-class-directive to set the css-class of the tr-element. Let’s have a closer look on the value in it – you can see, that we’re using a single-curly braces, which means that we’re not having an AngularJS expression, but a Javascript-Object here. Depending on if $even is true or $odd is true, either the class ‘evenClass’ or ‘oddClass’ will be set. Is this cool?

How about a search-box for the grid?

Another nice thing is the ability to us filters in AngularJS. See the following example about how to implement a search-textbox.

Example

<div style="width:100%" ng-init="movies = [
	{name:'Transformers: Age of Extinction', studio:'Paramount Pictures', gross:'$966,455,028'},
	{name:'The Amazing Spider-Man 2', studio:'Columbia Pictures', gross:'$706,666,005'},
	{name:'X-Men: Days of Future Past', studio:'20th Century Fox', gross:'$739,472,870'}]">

	<p>Filter: <input type="search" ng-model="movieFilter" placeholder="filter movies..." /></p>
	<table>
		<tr ng-repeat="movie in movies | filter:movieFilter" ng-class="{evenClass:$even, oddClass:$odd}">
			<td>{{ $index + 1 }}</td>
			<td>{{ movie.name }}</td>
			<td>{{ movie.studio }}</td>
			<td>{{ movie.gross }} </td>
		</tr>
	</table>
</div>

Play with example »

We added a filter-input, which provides us a search-term in the movieFilter. In the ng-repeat-directive the value of the movieFilter is then used as a filter-argument on the movies-array. Try the example. Enter one of the movies and see how responsive it feels!