How to repeat objects with Angular.js

Question

I'm new to Angular and need to repeat objects until the data is exhausted.

Here's the code snippet that I wish to repeat.

 <!-- Start box content --> <div class='span3 box box-nomargin' style="margin-left: 0px !important;"> <!-- Now starts the box content --> <div class='box-header red-background'> <div class="title text-center span12" style="font-weight: 600;">Skyfall</div> <div class="normal text-center span12 utilMonSmallTitle">Network:&nbsp;<span class="utilMonSmallText">My First Network</span></div> <div class="normal text-center span12 utilMonSmallTitle">Site:&nbsp;<span class="utilMonSmallText">My Site 388_ascdaaf298</span></div> </div> <div class='box-content text-center' style="padding-bottom: 0px;"> <!-- Start box content Header --> <div class="title span4 text-left" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Hardware</div> <div class="title span3 text-center" style="color: black; padding-left: 20px; font-size: 14px; font-weight: 600; margin-top: -10px;"> <i id="icon508Compliant" class="icon-remove-sign" style="font-size: 40px; color: red;"></i> <!-- The icons are: icon-remove-circle, icon-warning-sign, icon-ok-circle --> </div> <div class="title span4 text-right" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Software</div><br><br> <!-- End box content Header --> <!-- Start box content body --> <div class="row-fluid"> <div class="span6"> <span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;"> <span id="hwVal1">{{hardwareAlerts[0].critical}}</span> </span> <span style="font-size:24px; font-weight: bold; padding-left: 8px;"> <span id="hwVal2">{{hardwareAlerts[0].warning}}</span> </span> </div> <div class="span6"> <span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;"> <span id="swVal1">{{softwareAlerts[0].critical}}</span> </span> <span style="font-size:24px; font-weight: bold; padding-left: 8px;"> <span id="swVal2">{{softwareAlerts[0].warning}}</span> </span> </div> </div> <!-- End box content Body --> <!-- Start box content footer buttons --> <div class="row-fluid"> <button class="btn btn-small btnBoxLeft"><i class="icon-warning-sign">View Critical</i></button> <button class="btn btn-small btnBoxRight"><i class="icon-warning-sign">View All</i></button> </div> <!-- End box content footer buttons --> </div> <!-- Now ends the box content --> </div> <!-- End box content --> 

So that whole snippet of code will REPEAT within a FLATTY Bootstrap "ROW" until there's no more data.

I'm used to Handlebars.js but Angular is a little tricky.

It needs to repeat based on the number of NETWORKS there are.

For instance: If there are 10 networks, the above code should repeat 10 times displaying 10 BOXES.

I have my controllers and directives code working... just need to understand the "REPEAT" stuff.

Thank you all.

Answer 1

You need to use ng-repeat

<div class='span3 box box-nomargin' style="margin-left: 0px !important;" ng-repeat="object in objects"> 

Where in the above snippet objects would be your ARRAY of objects. If you only have an object and you wish to iterate keys, use ng-repeat="(k, v) in objects". (Where k is your property name and v is the value of said property)

To display the data, simply reference the property within the repeater where you wish to use it via:

{{object.PROPERTY}} 

Or, if using the (k, v) in objects simply do {{k}} or {{v}}