AngularJS: Exploring ng-repeat, ng-show, and more

I have been meaning to to explore the capabilities of AngularJS a little more, so I whipped up this small demo app.  It takes your zip code (hard-coded into the JavaScript file), queries a YQL API, and displays a listing of the nearest NPR stations.  It is not the most unique piece of code but it gives me a chance to explore a few concepts.

[iframe src=”http://embed.plnkr.co/R9InYQ/preview” width=”100%” height=”480″]

Let’s explore a little bit of what is going on here.  The YQL API that we are using is from the community tables.  It takes a zip code and returns an array of stations.  One of the record attributes is ‘marketCity’.  Our first goal is to reorganize the array so that we can better group the stations.

So, now instead of having to iterate over an array of stations (that have the market as an attribute), we can iterate over an array of markets (that have stations as an attribute). As you can see above, we are listing markets in <h2> tags and then we are listing the stations under each market.  So, how do you do a loop inside of another loop?

As you can see, Angular allows you to place an ng-repeat inside of another ng-repeat, to loop over child arrays.  You will also notice that 88Nine does not provide a logo image within the feed.  You can avoid displaying a broken image by using ng-show.

Have a suggestion or comment?  Feel free to leave a comment below.

View in Plunker

Run in Plunker

View in jsFiddle

Run in jsFiddle

Leave a Reply

Your email address will not be published.