Using repeating elements in AngularJS

Index:

  1. Getting started with AngularJS
  2. Creating an AngularJS Controller
  3. The AngularJS $scope is not the MVC Model
  4. Using repeating elements in AngularJS
  5. Filtering the data in an AngularJS ngRepeat element
  6. Using the AngularJS FormController to control form submission
  7. Creating an AngularJS Directive
  8. Using the DOM in an AngularJS application
  9. To SPA or not to SPA

 

In the previous  posts I showed how to get started with AngularJS and use some of the basic AngularJS directives to data bind. In these examples I uses a really simple single element to bind to. However in lots of business cases you really need to display a list of repeating elements. Fortunately this is really easy to do.

 

The AngularJS ng-repeat directive

Whenever you need to repeat a specific block of HTML markup for each item in an array the ng-repeat directive is your friend. Take a look at the simple list of people below.

image

 

The data for this list is contained in an array that is added to the $scope object in the controller. The actual controller is real simple, see the code below.

 

   1: function DemoCtrl($scope) {

   2:  

   3:     $scope.people = [

   4:         { firstName: 'Maurice', lastName: 'de Beijer' },

   5:         { firstName: 'Jacob', lastName: 'Smith' },

   6:         { firstName: 'Sophia', lastName: 'Brown' },

   7:         { firstName: 'Mason', lastName: 'Lee' },

   8:         { firstName: 'Emma', lastName: 'Wilson' },

   9:         { firstName: 'Ethan', lastName: 'Martin' },

  10:         { firstName: 'Emily', lastName: 'Taylor' },

  11:         { firstName: 'Wiliam', lastName: 'Wong' },

  12:         { firstName: 'Emily', lastName: 'Campbell' },

  13:         { firstName: 'Liam', lastName: 'Williams' }

  14:     ];

  15: }

 

The markup to generate the list in the screenshot is also real simple:

 

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         {{person.firstName}} {{person.lastName}}

  10:     </div>

  11:  

  12:     <script src="Scripts/angular.js"></script>
   1:  

   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  13: </body>

  14: </html>

 

The DIV element containing the ng-repeat, and everything inside it, is simply repeated for every person in the array of people. Simple right :-)

 

Editing the people

Editing the people in the list is really easy, just add an input control and use the same ng-model directive as before.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         <input type="text" ng-model="person.firstName"/>

  10:         {{person.firstName}} {{person.lastName}}

  11:     </div>

  12:  

  13:     <script src="Scripts/angular.js"></script>
   1:  

   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  14: </body>

  15: </html>


 


In the screenshot below I am changing Jacob to Bob and as I type in the input element the text behind it is updated immediately.


image


 


Enjoy :-)

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>