AngularJS – Displaying Repeating Elements

If your controller returns an array of repeating records, such as

$scope.products = [
{
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014′, ’03’, ’08’),
cover: ‘img/the-book-of-trees.jpg’
},
{
name: ‘Program or be Programmed’,
price: 8,
pubdate: new Date(‘2013′, ’08’, ’01’),
cover: ‘img/program-or-be-programmed.jpg’
}
]
}
]
);

You can display these in your view (eg index.html) using the ng-repeat div element as such

<div ng-repeat=”product in products” class=”col-md-6″>
<div class=”thumbnail”>
<img ng-src=”{{ product.cover }}”>
<p class=”title”>{{ product.name }}</p>
<p class=”price”>{{ product.price | currency }}</p>
<p class=”date”>{{ product.pubdate | date }}</p>
</div>
</div>

Rendering the following

clip

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s