Can anyone tell me how to create table in Visualforce page using angularJs.
Below code is am trying to implement
but it doesnt work
<apex:page >
<html>
<head>
<script src="https://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script src="https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<link rel="stylesheet" href="https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
body {
padding: 10px !important;
}
.ng-table tr.emphasis td {
background-color: #DDD;
font-weight: bold;
}
</style>
<script>
//defining module
var app = angular.module('main', ['ngTable']);
main.controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
</script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data" >
<td data-title="'Name'">
{{user.name}}
</td>
<td data-title="'Age'">
{{user.age}}
</td>
</tr>
</table>
</body>
</html>
</apex:page>
My Expectation Result would be
But It gives like
I dono whats wrong in my code
Thanks in advance Karthick
