如何用Angular.js重複對象

我是Angular的新手，需要重複對象直到數據耗盡。如何用Angular.js重複對象

這是我想重複的代碼片段。

 <!-- 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引導「行」，直到有沒有更多的數據中REPEAT。

我習慣了Handlebars.js，但Angular有點棘手。

它需要根據網絡的數量重複。

例如：如果有10個網絡，上面的代碼應重複10次顯示10個BOXES。

我有我的控制器和指令代碼工作...只需要瞭解「重複」的東西。

謝謝大家。

來源

2014-01-30 Peter The Angular Dude

您需要使用ng-repeat

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

凡在上面的代碼片段objects將是你的對象數組。如果你只有一個對象，並且你想迭代鍵，則使用ng-repeat="(k, v) in objects"。（凡k是你的屬性名稱和v是說財產的價值）

要顯示的數據，只需引用轉發器中的屬性，你希望通過使用它：

{{object.PROPERTY}}

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

來源

2014-01-30 14:17:07 tymeJV

如何用Angular.js重複對象

回答

相關問題