How to use Tables in AngularJS

Anonymous User 716 27 Nov 2020

Anonymous User

Content Writer

I am a content writter !

1 Answers

Anonymous User 27 Nov 2020

Hi,

Here we will create a simple example of binding table format data using AngularJS.

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.

Simple Example

<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.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to use Tables in AngularJS

Can you answer this question?

1 Answers