Directives again in AngularJS

In the first directives section, I introduced an analogy (a team of laborers completing some building works) and used it to begin categorizing directives as one of three types:

structural
decorative
plumbing

Unfortunately, I then proceeded to only introduce plumbing directives (ng-app, ng-controller and ng-bind). Letâ€™s fix that now by returning to directives and discussingng-repeat.

ng-repeat

Most applications built with AngularJS are likely to be data-driven; reading, creating, updating and deleting data. Real-world data is often plural in natureÂ â€“Â for example:

walking into your local foreign exchange provider to buy currency for your next holiday. Youâ€™ll likely be presented a board of rates for the most popular currency pairings.
visiting your local bookstore and browsing your favorite niche. Youâ€™ll likely be presented with a range of choicesÂ for a book to leaf through.

ng-repeat is a structural directive because it modifies the â€œbricks and mortarâ€ of our HTML. At a simple level, it creates the HTML element it is attached to multiple times based on the contents of a model collection property, e.g., an array.

Lets see how ng-repeat can help us display an array of articles. Edit index.html to the following:

<html ng-app="udemyAdmin">
  <head>
    <title>tutsocean - admin area</title>
  </head>
  <body ng-controller="articleCtrl">

    <div ng-repeat="article in articles" ng-bind="article.title"></div>

    <ul>
      <li ng-repeat="article in articles">
        <p>{{article.title}}</p>
      </li>
    </ul>

    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </body>
</html>

<head>

<title>tutsocean - admin area</title>

</head>

<ul>

<p>{{article.title}}</p>

</li>

</ul>

</body>

</html>

In the snippet above,Â article in articles is much like a traditional JavaScript forâ€¦inloop, with article being the name of the variable assigned to on each iteration ofarticles. article is then available for use in other directives and bindings, either on that HTML element or a descendant (the snippet shows both).

Edit controllers.js so that an appropriate model property is available as follows:

angular.module('tutsocean').controller('articleCtrl', function($scope) {
  $scope.articles = [
    { title: "Learn AngularJS" },
    { title: "JavaScript closures explained!" }
  ];
});

angular.module('tutsocean').controller('articleCtrl', function($scope) {

$scope.articles = [

{ title: "Learn AngularJS" },

{ title: "JavaScript closures explained!" }

];

});

All being well, youâ€™ll see the same two article titles displayed twiceÂ â€“Â inside <div>and <p> elements, respectively.

ng-repeat is a very powerful directive. Weâ€™ve used it to simply create an HTML element per item in a static array. It is more likely that youâ€™ll use ng-repeat with dynamic collectionsÂ â€“Â for example, live feeds of buy and sell prices for foreign exchange currency pairings. ng-repeat will track changes in dynamic collections and, in most cases, behave as you would expect, creating, editing and destroying HTML elements appropriately.

limitTo filter

We can further demonstrate the power of ng-repeat by combining it with a filter. Filters could demand a section of this tutorial to themselves, but in general they are applied to expressions, using the | operator, and format the result.

AngularJS comes with a handful of built-in filters, including limitTo. limitTo will format the result of the expression we have used with ng-repeat by returning a specified number of articles from an optional starting index.

Edit index.html as follows:

<html ng-app="udemyAdmin">
  <head>
    <title>tutsocean - admin area</title>
  </head>
  <body ng-controller="articleCtrl">

    <div ng-repeat="article in articles | limitTo:1 " ng-bind="article.title"></div>

    <ul>
      <li ng-repeat="article in articles | limitTo:1:1">
        <p>{{article.title}}</p>
      </li>
    </ul>

    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </body>
</html>

<head>

<title>tutsocean - admin area</title>

</head>

<ul>

<p>{{article.title}}</p>

</li>

</ul>

</body>

</html>

In the above snippet, both ng-repeat expressions include a contrived usage of thelimitTo filter (we only have two articles thus far, so limiting to one seems pretty pointless).

The first expression is limited to one article, but we havenâ€™t specified a starting index, so 0 is used. This results in HTML of <div>Learn AngularJS</div>.

The second expression is also limited to one article, but this time we have specified a starting index. This results in HTML of <p>JavaScript closures explained!</p>.