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.
- What is ng-repeat directive in angularJS?
- 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;});