Angular JS Magazine

sâmbătă, 23 august 2014

Generating Elements Repeatedly

Generating elements repeatedly is for sure one of the most used Angular features. This can be easily accomplsihed using the ng-repeat directive, like below:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
 <div ng-app="" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', rank: 1 },
     { name: 'Djokovic, Novak (SRB)', rank: 2 },
     { name: 'Federer, Roger (SUI)', rank: 3 },
     { name: 'Wawrinka, Stan (SUI)', rank: 4 },
     { name: 'Ferrer, David (ESP)', rank: 5 }]">

     <div id="atpPanel" class="panel">
         <h3 class="panel-header">ATP SINGLES RANKINGS</h3>
         <table class="table">
             <thead>
             <tr>                 
                 <th>Rank</th>
                 <th>Name</th>
             </tr>
             </thead>
             <tbody>
             <tr ng-repeat="item in atp">                              
                 <td>{{item.rank}}</td>
                 <td>{{item.name}}</td>
             </tr>
             </tbody>
         </table>
     </div>
 </div>
</body>
</html>


Note:
  The ng-repeat directive can be nested also, like this:

   ... ng-repeat="item in list" ...
        ... ng-repeat="subitem in item">{{subitem}}...