What Will I Learn?
A.How to repeat HTML elements in AngularJS
B.We want to display all tracks with the duration as a bulleted list
C.Moreover we want to display the index and the information if the track is the first, in the middle or the last in the list
Requirements
Basic Knowledge of HTML and CSS language .
Basic Knowledge of JavaScript language .
Has an editor text support HTML and JavaScript .
Difficulty
Basic
In this tutorial I would like to show you how to repeat HTML elements in AngularJs. So let’s assume we have a list of album tracks. We want to display all tracks with the duration as a bulleted list. Moreover we want to display the index and the information if the track is the first, in the middle or the last in the list:
Coldplay
Here’s the source code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<ul data-ng-controller="AlbumCtrl">
<li data-ng-repeat="track in tracks">
{{$index + 1}}. {{track.name}} {{track.duration}} ({{$first ? 'first' : $middle ? 'middle' : 'last'}} track)
</li>
</ul>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function($scope) {
$scope.tracks = [
{name:'Paradise', duration:'4:21'},
{name:'Princess of China', duration:'3:35'},
{name:'The Scientist', duration:'4:26'},
{name:'Atlas', duration:'3:22'}
];
});
As you can see you can use the data-ng-repeat attribute directive to loop over a collection in the model (tracks) and repeat the < li > element.
Inside the loop you can use implicit properties llike $index, $first, $middle and $last which give you the current loop index (starts at 0) and booleans if the element is the first, in the middle or the last in the list respectively.
The cool thing is that you not only can loop over a list but also the key-value pairs in an object. So let’s say the album tracks are stored in a JavaScript object:
<h3>Coldplay</h3>
<ul data-ng-controller="AlbumCtrl">
<li data-ng-repeat="(name, duration) in tracks">
{{$index + 1}}. {{name}} {{duration}} ({{$first ? 'first' : $middle ? 'middle' : 'last'}} track)
</li>
</ul>
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function($scope) {
$scope.tracks = {
'Paradise' : '4:21',
'Princess of China' : '3:35',
'The Scientist' : '4:26',
'Atlas' : '3:22'
}
});