9/26/2014

Building an Angular List: Using ng-repeat

There are many things about Angular that make it an excellent framework to use, and one of my favorites is the way it's data binding simplifies the implementation of UI elements. One of the most useful elements, in my opinion, is the ng-repeat. Ng-repeat makes creating lists so simple that you will want to use them all the time. However, like most things Angular, you need to have a grasp of scoping and how to build an application. This blog post will walk through creating a very simple list that will hopefully get you started down the ng-repeat path.

The angular documentation (https://code.angularjs.org/1.2.25/docs/api/ng/directive/ngRepeat) shows just how bare bones one can get and still leverage the way Angular performs data-binding. We are going to put a little more into it, although not much. In most Angular applications, we are going to wrap the code in a module and attach controllers. The module creates a high level container to put pieces into, and a controller is designed to store functionality which keeps the code modular and clean. We are going to create a module (sampleRepeat) and a controller (sampleController) to start our example.

Javascript:
angular.module('repeatSample', [])
    .controller('repeatController', []);

HTML:
<div ng-app="repeatSample">
    <div ng-controller="repeatController">
        <ul>
        </ul>
    </div>
</div>


"Next, let's add some data."

Next, let's add some data to show and our list. For the purpose of the example, we are going to use a hard coded list of data. In practice, we would use a server side REST API or cached data. Our data is going to be simple: an array of object with one property called name.

var vegetables = [{
    "name": "Carrot"
}, {
    "name": "Potato"
}, {
    "name": "Broccoli"
}];

Now we have data and an application. It's time to put Angular data binding in action. We will add the vegetables array to the scope of the controller. A scope will be injected to the controller through our controller definition. Once we attach our data as an object property of the scope it will be accessible to the view, which is our html.

angular.module('repeatSample', [])
    .controller('repeatController', function ($scope) {
        $scope.veggies = vegetables;
    });


"Now we have data inside the scope, let's create a list."

Now we have data inside the scope, let's create a list. This is where the ng-repeat comes in. Using ng-repeat in the tag with an expression will instruct angular to loop through our array automatically. The expression we will use is "veg in veggies". As you can see above, veggies has been added as a property of the scope. Angular knows to check the scope for veggies when we invoke it on the html. The moniker "veg" becomes the variable for a single value in the veggies array as Angular loops through it. Therefore, you tell the "li" tag what to display by using Angular's escape sequence ("{{}}") and referring to the variable being used for the array values. We will grab the name property from each object in the array for our html by using {{veg.name}}.

<ul>
    <li ng-repeat="veg in veggies">
        {{veg.name}}
    </li>
</ul>

The result is data in the html with 4 lines of JavaScript and almost the same amount of html:

The project can be viewed on cloud9 at https://ide.c9.io/dposin/building_an_angular_list. In the screencast, we will go a little farther and show how using $index makes working with data array through ng-repeat very easy.

UPDATE: Fixed code (Thank you Dirk). Added link to c9 project.