Introduction:

Here we will explain to what is ng-repeat in AngularJS or how to use ng-repeat in AngularJS or How to draw a table using ng-repeat in AngularJS or ng-repeat directive to draw a table with Example:


Description:

AngularJS ng-repeat directive is used to draw tables. Displaying tables with AngularJS is very easy simple. The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Following below how to use ng-repeat directive to draw a table.

  •      Example:

<table>

        <tr>

            <th>First Name</th>

            <th>Middle Name</th>

            <th>Marks</th>

        </tr>

        <tr ng-repeat="user in User.users">

            <td>{{ user.fname }}</td>

            <td>{{ user.lname }}</td>

            <td>{{ user.marks }}</td>

        </tr>

    </table>

Displaying with CSS style

You can also design the tables by using CSS.

Example:

<style>

    table, th, td {

        border: 1px solid grey;

        border-collapse: collapse;

        padding: 5px;

        width: 400px;

    }

    table tr:nth-child(odd) {

      background-color: #f2f2f2;         

}

  table tr:nth-child(even) {

      background-color: #ffffff;        

}

</style>

  • AngularJS Table example with CSS and Script.

<script src="~/Scripts/jquery-3.1.1.js"></script>

<script src="~/Scripts/angular.js"></script>

<h2>AngularJS Application</h2>

<div ng-app="MyApp" ng-controller="MyController">

    <table>

        <tr>

            <th>First Name</th>

            <th>Middle Name</th>

            <th>Marks</th>

        </tr>

        <tr ng-repeat="user in User.users">

            <td>{{ user.fname }}</td>

            <td>{{ user.lname }}</td>

            <td>{{ user.marks }}</td>

        </tr>

    </table>

</div>

<style>

table, th, td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

width: 400px;

    }

table tr:nth-child(odd) {

background-color: #f2f2f2;

  }

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>


<script>

    var mainApp = angular.module("MyApp", []);

    mainApp.controller('MyController', function ($scope) {     

$scope.User = {           

users: [

{ fname: 'aditya', lname: 'kumar', marks: 70 },

{ fname: 'pawan', lname: 'khan', marks: 80 },

{ fname: 'suraj', lname: 'brain', marks: 65 },

{ fname: 'pankaj', lname: 'mark', marks: 70 },

{ fname: 'johan', lname: 'bindu', marks: 70 },

{ fname: 'mayank', lname: 'panday', marks: 65 },

{ fname: 'suresh', lname: 'pal', marks: 70 },

{ fname: 'rakesh', lname: 'kumar', marks: 80 },

{ fname: 'rajeev', lname: 'kumar', marks: 65 }

],

};

    });

</script>

  • Output

Open AngularJS.htm page in a web browser. See the result.

How to use Tables in AngularJS

Thanks.

comments


Leave a comment

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

You may also like