Table in AngularJs Example

Table in AngularJs Example

Creating a dynamic table using JavaScript or JQuery requires many lines of code and requires DOM manipulation but it is pretty easy to create by use of AngularJs. Below example will demonstrate how to create table.

<html ng-app="myApp" >
    <title>Table with ng-repeat</title>
        border:1px solid black;
<body ng-controller="gridController">
<tr ng-repeat="x in details">
<script src="lib/angular/angular.js" type="text/javascript"></script>
    var myApp = angular.module("myApp", []).controller("gridController", function ($scope) {
                    [{ FullName: "Code2Succeed-1", age: "age: 1", Address: "Address: Code2Succeed-1" },
                     { FullName: "Code2Succeed-2", age: "age: 2", Address: "Address: Code2Succeed-2" },
                     { FullName: "Code2Succeed-3", age: "age: 3", Address: "Address: Code2Succeed-3" },
                     { FullName: "Code2Succeed-4", age: "age: 4", Address: "Address: Code2Succeed-4" },
                     { FullName: "Code2Succeed-5", age: "age: 5", Address: "Address: Code2Succeed-5" },
                     { FullName: "Code2Succeed-6", age: "age: 6", Address: "Address: Code2Succeed-6" },
                     { FullName: "Code2Succeed-7", age: "age: 7", Address: "Address: Code2Succeed-7" },
                     { FullName: "Code2Succeed-8", age: "age: 8", Address: "Address: Code2Succeed-8" },
                     { FullName: "Code2Succeed-9", age: "age: 9", Address: "Address: Code2Succeed-9" },
                     { FullName: "Code2Succeed-10",age: "age: 10", Address: "Address: Code2Succeed-10"} 



We see how easy it is to create an dynamic table using AngularJS. The data here has been manually added, however it can be fetched dynamically in JSON format using $http service.

Leave a Reply

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