AngularJs table and angularJs ng-repeat with example

AngularJS table example with ng-repeat directive

AngularJs table, We can make a table in HTML using table tag but If we have multiple rows then angularJs ng-repeat directive makes it very easy to show table and we need to write less code.

In this tutorial, I am going to show you how to create a table using angularJs ng-repeat directive.

  1. What is ng-repeat directive in angularJS?
  2. How to create a table using angularJs ng-repeat directive.

What is ng-repeat directive in angularJS?

AngularJs ng-repeat directive is like a loop for example if I have an array which contains 100 values or objects and I want to retrieve this data at my view part so by the help of ng-repeat we can do this.

<p ng-repeat="x in arrayName">

{{x}}

</p>

How to create a table using angularJs ng-repeat directive.

Complete Source code for this example :

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/index.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="3px;">

<tr>
<td>Name</td>
<td>Age</td>
</tr>

<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.Age}}</td>
</tr>
</table>
</body>
</html>

If you are new for angularJs first go for  Module and Controller

index.js

var app = angular.module('myApp',[]);

app.controller('myCtrl',function($scope){

//define array in angularJS.

var users = [{name : "Jhon", Age : "25"},

{name : "Jhon1", Age : "25"},

{name : "Jhon2", Age : "25"},

{name : "Jhon3", Age : "25"},

{name : "Jhon4", Age : "25"}      ];

$scope.users = users;});



Single Page application using angularJS

Add a Comment

Your email address will not be published. Required fields are marked *

6 − 3 =