Index:
- Getting started with AngularJS
- Creating an AngularJS Controller
- The AngularJS $scope is not the MVC Model
- Using repeating elements in AngularJS
- Filtering the data in an AngularJS ngRepeat element
- Using the AngularJS FormController to control form submission
- Creating an AngularJS Directive
- Using the DOM in an AngularJS application
- 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.
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.
Enjoy 🙂