Question

我是Angular的新手，需要重复对象，直到数据耗尽。

以下是我想重复的代码段。

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

因此整个代码片段将在FLATTY Bootstrap“ROW”中重复，直到没有更多数据。

我习惯了Handlebars.js，但Angular有点棘手。

需要根据NETWORKS的数量重复。

例如：如果有10个网络，则上述代码应重复10次，显示10个BOXES。

我的控制器和指令代码正常工作......只需要了解“REPEAT”的内容。

谢谢大家。

Answer 1

您需要使用ng-repeat

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

上述代码段objects中的哪个位置是您的ARRAY对象。如果您只有一个对象，并且希望迭代密钥，请使用ng-repeat="(k, v) in objects"。（k是您的财产名称，v是所述财产的价值）

要显示数据，只需通过以下方式引用转发器中您希望使用它的属性：

{{object.PROPERTY}}

或者，如果使用(k, v) in objects，只需执行{{k}}或{{v}}

如何使用Angular.js重复对象

1 个答案: