Skip to content

Instantly share code, notes, and snippets.

@dustinmyers
Created August 11, 2015 16:22
Show Gist options
  • Save dustinmyers/a5ee32a006b6bb73dc33 to your computer and use it in GitHub Desktop.
Save dustinmyers/a5ee32a006b6bb73dc33 to your computer and use it in GitHub Desktop.
var app = angular.module('nestedRepeats', []);
app.controller('MainCtrl', function($scope, URL, $firebaseObj) {
// Normally we would handle data inside a service or factory... but for the
// example, we keep it short and simple, and hard code it into the controller.
$scope.data = [
{name: "Dustin", from:"Idaho", hobbies: ["Snowboarding", "Coding"]},
{name: "Brendan", from:"Utah", hobbies: ["Airsoft", "Writing"]},
{name: "Adriana", from:"Mexico", hobbies: ["Sleeping", "Bird Watching"]},
{name: "Andy", from:"Ogden", hobbies: ["Skiing", "Dirt Scootering"]}
];
$scope.test = 'Hello class!'
});
<!DOCTYPE html>
<html ng-app='nestedRepeats'>
<body ng-controller='MainCtrl'>
<!--First repeat sets each individual object in the data array-->
<!--to "person". Putting this repeat inside the <ul> tag means-->
<!--that the entire <ul> will be repeated for each object inside -->
<!--our data array. -->
<ul ng-repeat='person in data'>
<h1>Name: {{ person.name }}</h1>
<h3>From: {{ person.from }}</h3>
<h3>Hobbies</h3>
<ul>
<!--Now we are at our nested repeat. Remember we have -->
<!--each 'person' set up already from the first repeat,-->
<!--so we can exploit that with a nested repeat. So we-->
<!--will call person.hobbies (person being the object,-->
<!--and hobbies being a key, or property inside the-->
<!--object) and repeat through the array found at hobbies.-->
<!--This time we don't want the full <ul> repeated, just-->
<!--the <li>.-->
<li ng-repeat='hobby in person.hobbies'>{{ hobby }}</li>
</ul>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainCtrl.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment