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.


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:

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:

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:

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>.