In this tutorial we will learn how to use ng- repeat  in AngularJS or how to bind a table using ng- repeat  in AngularJS with example.



The AngularJS ng- repeat directive use for making a HTML table, displaying one table row  for each items of an array or an object.

Example of ng-repeat: 

    ViewBag.Title = "Home Page";
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<div ng-app="mainApp" ng-controller="MyController">
    <table border="0">
                <td colspan="3"><h2>AngularJS ng-repeat</h2></td>
        <tr ng-repeat="x in data.records">
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $ = {
        records:[{ id: '1', name: 'Rajeev',email:''},
                 { id: '2', name: 'Tarun' ,email:''},
                 { id: '3', name: 'mayank',email:''},
                 { id: '4', name: 'Sohel',email:'' },
                 { id: '5', name: 'karan', email: '' }] }            
    table {
        margin:0 auto;
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
        table tr:nth-child(odd) {
            background-color: #ccc;
        table tr:nth-child(even) {
            background-color: #ffffff;


what is ng-repeat in AngularJS

  •        I hope this article will help to you.


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like