AngularJS: Example – Create table html element using ngRepeat

angularjs

The following example shows how to draw a table element using the AngularJS ngRepeat.

Controller

The example contains the app.js controller and the html page.

The Model ‘cities’ has the collection of the city names with their country name. Please consider below.

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.cities = [{
    city: "NewDelhi",country:"India"
  }, {
    city: "Londan",country:"UK"
  }, {
    city: "NewYork",country:"USA"
  }, {
     city: "Tokyo",country:"Japan"
  }, {
     city: "Moscow",country:"Russia"
  }, {
     city: "Beijing ",country:"China"
  }, {
    city: "New Delhi",country:"India"
  }];
});

The following is the html page where we are using the ng-repeat directive to draw the table html element. We iterates over the cities.

index.html

<body ng-controller="MainCtrl">
  <div id="metrodiv" style="float:left;width:200px;">
 
    <table >
      <tr>
        <th>Sr.</th><th>City</th><th>Country</th>
      </tr>
      <tr ng-repeat="key in cities">
        <td>{{$index + 1}}</td><td>{{key.city}}</td>
        <td>{{key.country}}</td>
      </tr>
    </table>
 
  </div>
</body>

You can merge the above code and see the results.