ng-repeat to create each list item.I want an unordered list of people, with each one in it's own
li with the person's full name as a title. Here's the pseudocode:foreach item in items
li
h1 item.firstName item.LastName
p Gender: item.gender, Age: item.ageInstead of using an endpoint for this example, I've created an array of person objects with an ID, First Name, Last Name, Age, and Gender, and assigned it to the
$scope. Here's my JavaScript:var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
$scope.items = [
{
"id": "1",
"firstName": "Glenda",
"lastName": "Fitzpatrick",
"age": "21",
"gender": "f"
},
{
"id": "2",
"firstName": "Frank",
"lastName": "Jones",
"age": "32",
"gender": "m"
},
{
"id": "3",
"firstName": "Sarah",
"lastName": "Graham",
"age": "24",
"gender": "f"
},
{
"id": "4",
"firstName": "Grant",
"lastName": "Smith",
"age": "30",
"gender": "m"
},
{
"id": "5",
"firstName": "John",
"lastName": "Manning",
"age": "28",
"gender": "m"
},
{
"id": "6",
"firstName": "Lucy",
"lastName": "Hall",
"age": "35",
"gender": "f"
},
{
"id": "7",
"firstName": "Faye",
"lastName": "Brandt",
"age": "37",
"gender": "f"
}
];
}]);Here's the HTML that I'm using:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body data-ng-app="myApp">
<ul data-ng-controller="myController">
<li data-ng-repeat="item in items">
<div>
<h1>{{item.firstName}} {{item.lastName}}</h1>
<p>Gender: {{item.gender}}, Age: {{item.age}}</p>
</div>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>That's it. A nice little unordered list that displays the data in a loop.
ng-repeat
This is a built in directive from AngularJs. It duplicates the element that it is attributed to - and all the elements and content within - for each of the items in the given array. You'll recognise theitem in items syntax from for each loops, and this behaves in exactly the same way. When AngularJs encounters the ng-repeat it iterates through your array and uses the html you've written as a template. Using the double-braces syntax ({{item.firstName}}), AngularJs knows which parts of your array you want to be displayed in each placeholder and switches it out for this item's value.Note: I've used
data-ng-repeat here so that my html passes validation. You can choose whether or not to prefix ng-repeat - and what with - based on your own needs.
No comments:
Post a Comment