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”>{{ }}</p>
<p class=”price”>{{ product.price | currency }}</p>
<p class=”date”>{{ product.pubdate | date }}</p>

Rendering the following



Leave a Reply

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

You are commenting using your 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