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.
- What is ng-repeat directive in angularJS?
- How to create a table using angularJs ng-repeat directive.
[embedyt] https://www.youtube.com/watch?v=c3IlBfbyCOg[/embedyt]
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;});
