AngularJS: Repeating directive

This example shows how to create a custom directive (custom html tag that represents a section of html), and then inject a list that will be repeated and will display the directive once for each item in the list. This can be used to show rows of data in a grid or a menu, etc. This is a very basic example. Imagine using http.get to get data from your API, and that you would inject it into a more polished template html.

Controller code:

//controller with a list that will use repeating directive to display
myApp.controller('repeatingDirectiveController',['$scope', function($scope){
    
     $scope.people = [
         { name: 'John Doe' , address:'123 Main St., Greensboro, NC'},
         { name: 'Jane Doe', address:'456 Blue St., Greensboro, NC'},
         { name: 'Gorge Smith', address:'789 Greene St., Greensboro, NC'}
         ];
}]);

Template HTML:


Page (view) HTML:

<h1>{{pageName}}</h1>
<!-- people is a json list in the controller. We get a person and pass it into the
     searchResult directive -->
<search-result-3 person-object="person" ng-repeat="person in people"></search-result-3>  

This shows a list of 3 items defined in the controller.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s