Skip to content

Instantly share code, notes, and snippets.

Created August 11, 2015 16:22
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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.
$ = [
{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: {{ }}</h1>
<h3>From: {{ person.from }}</h3>
<!--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>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainCtrl.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment