How to repeat HTML elements in AngularJS

coderlovely (43)in #utopian-io • 7 years ago (edited)

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

Paradise 4:21 (first track)
Princes of China 3:35 (middle track)
The Scientist 4:26 (middle track)
Atlas 3:22 (last track)

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'
    }
});

As you can see tracks is now a JavaScript object/dictionary.
The notation at data-ng-repeat changed to (name, duration) which represent a key-value pair in
tracks.
The downside is that the order of the key-value pairs is not kept as appearing in tracks. AngularJs automatically sorts the keys alphabetically.