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.

tymeJV · Accepted Answer · 2014-01-30 14:17:07Z

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}}

answered Jan 30, 2014 at 14:17

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to repeat objects with Angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related