I am trying to display data which is in json file in table using angularJS, but I get blank page as an output. The code is below. I have separate json file and separate js file in which I have defined angular controller. When I ran the application I got a blank page as an output.
View:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px">
<div class="col-lg-8">
<div class="page-header">
<h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
</div>
<div class="bs-component" ng-controller="listdata">
<table class="table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</body>
</html>
app.js-
var app = angular.module('angularTable', []);
app.controller('listdata', function ($scope, $http) {
$scope.users = []; //declare an empty array
$http.get("mockJson/mock.json").success(function (response) {
alert('');
$scope.users = response; //ajax request to fetch data into $scope.data
});
});
mock.json:-
[ { "id": 1, "first_name": "Jhon", "last_name": "show", "hobby": "Eating" },
{ "id": 2, "first_name": "Jhon2", "last_name": "show2", "hobby": "Eating2" },
{ "id": 3, "first_name": "Jhon3", "last_name": "show3", "hobby": "Eating3" },
{ "id": 4, "first_name": "Jhon4", "last_name": "show4", "hobby": "Eating4" },
{ "id": 5, "first_name": "Jhon5", "last_name": "show5", "hobby": "Eatin5" },
{ "id": 6, "first_name": "Jhon6", "last_name": "show6", "hobby": "Eating6" },
{ "id": 7, "first_name": "Jhon7", "last_name": "show7", "hobby": "Eating7" },
{ "id": 8, "first_name": "Jhon8", "last_name": "show8", "hobby": "Eating8" },
{ "id": 9, "first_name": "Jhon9", "last_name": "show9", "hobby": "Eating9" },
{ "id": 10, "first_name": "Jhon10", "last_name": "show10", "hobby": "Eating10" },
{ "id": 11, "first_name": "Jhon11", "last_name": "show11", "hobby": "Eating11" },
{ "id": 12, "first_name": "Jhon12", "last_name": "show12", "hobby": "Eating12" },
{ "id": 13, "first_name": "Jhon13", "last_name": "show13", "hobby": "Eating13" },
{ "id": 14, "first_name": "Jhon14", "last_name": "show14", "hobby": "Eating14" },
{ "id": 15, "first_name": "Jhon15", "last_name": "show15", "hobby": "Eating15" },
{ "id": 16, "first_name": "Jhon16", "last_name": "show16", "hobby": "Eating16" },
{ "id": 17, "first_name": "Jhon17", "last_name": "show17", "hobby": "Eating17" },
{ "id": 18, "first_name": "Jhon18", "last_name": "show18", "hobby": "Eating18" },
{ "id": 19, "first_name": "Jhon19", "last_name": "show19", "hobby": "Eating19" },
{ "id": 20, "first_name": "Jhon20", "last_name": "show20", "hobby": "Eating20" },
{ "id": 21, "first_name": "Jhon21", "last_name": "show21", "hobby": "Eating21" },
{ "id": 22, "first_name": "Jhon22", "last_name": "show22", "hobby": "Eating22" },
{ "id": 23, "first_name": "Jhon23", "last_name": "show23", "hobby": "Eating23" },
{ "id": 24, "first_name": "Jhon24", "last_name": "show24", "hobby": "Eating24" },
{ "id": 25, "first_name": "Jhon25", "last_name": "show25", "hobby": "Eating25" }]
I don't see any issues with your code but made a slight modify of defining ng-app on body instead of html tag.
Here is the working plunker for the same
<body>
<div role="main" class="container theme-showcase" ng-app="angularTable">
<div class="" style="margin-top:90px">
<div class="col-lg-8">
<div class="page-header">
<h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
</div>
<div class="bs-component" ng-controller="listdata">
<table class="table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
Modify your HTML <head> tags like below
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</head>
From comments by OP the issue is with $http.get method which is using .success function which is no more used in 1.6 version.
Either OP can fallback to <1.6 versions or use .then function for success callbacks
Here is the updated plunker
When using .then function it has all the objects related to a response hence for data retrieval we should use response.data
I think the issue is with the angular version.
$http.get(...).success is removed in angular 1.6
Try using the below, it uses the new syntax
var app = angular.module('angularTable',[]);
app.controller('listdata',function($scope,$http){
$scope.users = [];
$http.get("demo.json").then(function(response){
$scope.users = response.data;
});
});
Related
I have a table that is generated dynamically using Angular 1.6. The data comes from a web API in JSON format. Here is a sample of the data.
{
"CallData": [
{
"TableHeaders": [
{
"id": "0",
"text": "Time"
},
{
"id": "1",
"text": "January"
},
{
"id": "2",
"text": "February"
}
],
"TableRows": [
{
"id": "0",
"cells": [
{
"id": "0",
"text": "7:00"
},
{
"id": "1",
"text": "0"
},
{
"id": "2",
"text": "0"
}
]
},
{
"id": "1",
"cells": [
{
"id": "0",
"text": "8:00"
},
{
"id": "1",
"text": "18"
},
{
"id": "2",
"text": "83"
}
]
}
]
}
]
}
Here is my HTML that is generating the table:
<table>
<thead>
<tr>
<th ng-repeat="header in data.TableHeaders">
{{header.text}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.TableRows">
<td ng-repeat="cell in row.cells">
{{cell.text}}
</td>
</tr>
</tbody>
</table>
I want to be able to sort my data when I click on the headers. However, I have so far tried to set a sort variable to the id of the headers, using ng-click, and I can see that it updates the variable, but it doesn't sort the data. This was using ng-repeat="row in data.TableRows | orderBy: sortVar"
My sorting code:
// Initialise variable
$scope.sortVar = '0';
<!-- HTML snippet -->
<th ng-repeat="header in data.TableHeaders" ng-click="updateSort(header.id)"></tr>
// function
$scope.updateSort = function(id) {
$scope.sortVar = id;
}
Is there any way at all to be able to sort my dynamic tables? Am I going to need to add another value to my JSON data in order to do this?
I'm relatively new to angular, so not 100% sure how to achieve this.
If anything is unclear, let me know and I'll try to explain it a bit better.
Cheers
This sort is a bit complicated since it requires going into nested arrays and objects. Here is a sample of how it can be achieved using JavaScript Array's sort function:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.updateSort = function(index) {
$scope.data.TableRows = $scope.data.TableRows.sort(function(rowA, rowB) {
return rowA.cells[index].text.localeCompare(rowB.cells[index].text);
});
}
$scope.sortVar = '0';
$scope.data = {
"TableHeaders": [{
"id": "0",
"text": "Time"
}, {
"id": "1",
"text": "January"
}, {
"id": "2",
"text": "February"
}],
"TableRows": [{
"id": "0",
"cells": [{
"id": "0",
"text": "7:00"
}, {
"id": "1",
"text": "29"
}, {
"id": "2",
"text": "0"
}]
}, {
"id": "1",
"cells": [{
"id": "0",
"text": "8:00"
}, {
"id": "1",
"text": "18"
}, {
"id": "2",
"text": "83"
}]
}]
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th ng-repeat="header in data.TableHeaders" ng-click="updateSort($index)">
{{header.text}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.TableRows" >
<td ng-repeat="cell in row.cells">
{{cell.text}}
</td>
</tr>
</tbody>
</table>
</body>
</html>
I used Pagination Directive (it´s easy to use)
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
example:
http://www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls
Demo:
http://demo.expertphp.in/search-sort-and-pagination-angularjs-example/
I'm obtaining a response in json format from laravel application like below:
[{"id":11,"name":"test","description":"adddas","isDone":false,"created_at":{"date":"2017-09-06 12:23:23.000000","timezone_type":3,"timezone":"UTC"}},{"id":12,"name":"test2","description":"asdasdsa","isDone":false,"created_at":{"date":"2017-09-13 06:23:22.000000","timezone_type":3,"timezone":"UTC"}},{"id":13,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 18:44:57.000000","timezone_type":3,"timezone":"UTC"}},{"id":14,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:23:58.000000","timezone_type":3,"timezone":"UTC"}},{"id":15,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:45:35.000000","timezone_type":3,"timezone":"UTC"}}]
I'm trying to format these data in Angular js in ng-repeat directive in way like below:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date:'yyyy-MM-dd HH:mm:ss' }}</td>
</tr>
</tbody>
</table>
</div>
The problem is with format data. I'd like to format this as we can see above in format date:yyyy-MM-dd HH:mm:ss. The result is a table with incorrect dates:
How could I reduces .000000 in for example 2017-09-06 12:23:23.000000? The filter does not work at all. I don't know why. I would be greateful for help.
I'm obtaining data from database by Doctrine query in way like this:
public function getTasks(){
$results = $this->entityManager->createQueryBuilder()
->select('t')->from('\TodoList\Http\Entities\Task', 't')
->getQuery()->getArrayResult();
true);
return $results;
}
add this function to your controller
$scope.ToDate=function(date) {
return new Date(date);
}
and change your view like code below
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>
{{ ToDate(task.created_at.date) | date:'yyyy-MM-dd HH:mm:ss' }}
</td>
</tr>
Pass date as "date": "2017-09-06T12:23:23.000000" instead of "date":"2017-09-06 12:23:23.000000"
Check below code:
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.title = 'Hello world';
$scope.tasks = [{
"id": 11,
"name": "test",
"description": "adddas",
"isDone": false,
"created_at": {
"date": "2017-09-06T12:23:23.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 12,
"name": "test2",
"description": "asdasdsa",
"isDone": false,
"created_at": {
"date": "2017-09-13T06:23:22.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 13,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T18:44:57.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 14,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:23:58.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}, {
"id": 15,
"name": "task12321",
"description": "jakis tam testowy task",
"isDone": false,
"created_at": {
"date": "2017-09-03T20:45:35.000000",
"timezone_type": 3,
"timezone": "UTC"
}
}];
}]);
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div>{{title}}</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{task.name}}</td>
<td>{{ task.created_at.date | date : "yyyy-MM-dd h:mm:ss"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I have an angular object, i have to show its records with filter and sorting. Also i have to show the records of unique values per keys within the object with checkbox.
I shows record with filter and sorting also i showed the unique values per key with checkbox.
Now i have to get the values of these checkbox per key.
Here is my code with plunker url below.
index.html
<body ng-controller="myController">
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input type="checkbox">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
See in plunker http://embed.plnkr.co/wblXhejmSWApBeCAusaI/
You can do like below example:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<h1>Filter Table</h1>
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input ng-model="item" type="checkbox" ng-change="getCheckedValues(item,dv,hv.filter)">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
var array = []
array["name"] = [];
array["age"] = [];
array["designation"] = [];
array["city"] = [];
$scope.getCheckedValues = function(e,val,key){
console.log(val)
if(e){
array[key].push(e)
}else{
array[key].shift()
}
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
console.log(array[tab])
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
Alright. Apologies for my previous answer I completely botched the question.
Anyhow I spent almost an hour trying to solve this and managed to do it using $scope.$$watchers[0].last and underscorejs.
//this is how getChecked looks like now
$scope.getChecked = function(tab) {
var selectedKey = tab.$$watchers[0].last;
_.each($scope.structure.info,function(row){
_(row).pairs().filter(function(item){
_.each(item,function(key){
if(key===selectedKey)
{
console.log(row);
return;
}
})
})
})
Above method is responsible for identifying the key and spitting in console, each time you select a key in below table. So check console.
The solution is on below plunkr.
https://embed.plnkr.co/kbiCwhW0RrdHtO3hVEEk/
My doubt is simple. How to replace , with line break in angular filter. i also added the demo jsfFiddle
angular
.module('myApp', [])
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join(",");
}
return input;
}
})
.controller('ctrl', function($scope) {
$scope.todolists = [{
"id": "id_584",
"customer_id": 2,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_122",
"customer_id": 3,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_128",
"customer_id": 4,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_805",
"customer_id": 5,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_588",
"customer_id": 6,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": ["id_115"," id_114"],
"customer_id": 7,
"url": "url",
"bill_number": "123",
"location": "from_location"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table class="table table-hover tr-table transactions" style="width: 100%;">
<thead>
<tr class="search-row pending-orders table-header-row-height tr-table-head">
<th>ID</th>
<th>Bill Number</th>
<th>Location</th>
<th>Url</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todolist in todolists">
<td>{{todolist.id | nicelist }}</td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
</table>
</body>
demo
In the above link, there will be table. In ID column last row contain 2 values which is present in array inside the json. Now instead of comma(,) is there any possible way for line break.
Please share your knowledge.
you use ng-bind-html with injecting sanitize at module level .
html:
<tbody>
<tr ng-repeat="todolist in todolists">
<td ng-bind-html="todolist.id | nicelist"></td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
code:
angular.module('myApp', ['ngSanitize']) //Inject here
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join("<br>");
}
return input;
}
})
working sample up for grabs here.
ng-bind-html directive Documentation
PS: make sure you inject sanitize or you can use different techiques .
I would like to ask how will you show the "totals array" below the table Event AccountShop, Place and Activity? This code is working but I do have trouble inserting the "total" value in the Json" below the table.
table.html
<!DOCTYPE html>
<html ng-app="myTable">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
var myTable=angular.module('myTable',[]);
myTable.controller('tableCtrl',function($scope,$http){
$http.get("Table.json").success(function(response){
$scope.members=response.events;
});
});
</script>
</head>
<body ng-controller="tableCtrl">
<table border="5">
<tr>
<th>Event</th>
<th>Account Shop</th>
<th>Place</th>
<th>Activity</th>
</tr>
<tr ng-repeat="member in members">
<td>{{member.Event.id}}<br>
{{member.Event.account_id}}<br>
{{member.Event.shop_id}}<br>
<td>
{{member.AccountShop.id}}<br>
{{member.AccountShop.name}}<br>
{{member.AccountShop.short_code}}<br>
</td>
<div ng-repeat="Place in member.Place">
{{Place.id}}<br>
{{Place.name}}<br>
{{Place.lk_country_code}}<br>
</div>
</td>
<td>
<div ng-repeat="Activity in member.Activity">
{{Activity.id}}<br>
{{Activity.short_description}}
</div>
</td>
</tr>
<th>Total</th>
<td>
<div ng-repeat="total members.totals">
{{totals.totals.page}}
{{totals.current}}
{{totals.count}}
{{totals.prevPage}}
{{totals.nextPage}}
{{totals.pageCount}}
{{totals.order}}
{{totals.limit}}
{{totals.options}}
{{totals.paramType}}
</table>
</body>
</html>
Table.json
{
"events": [
{
"Event": {
"id": "59",
"account_id": "1",
"shop_id": "1",
},
"AccountShop": {
"id": "1",
"name": "Gill Divers Pte Ltd",
"short_code": "GILL"
},
"Place": [
{
"id": "537",
"name": "Pulau Dayang",
"lk_country_code": "MY"
}
],
"Activity": [
{
"id": "4011",
"short_description": "sample\r\n"
},
{
"id": "106",
"short_description": "sample\r\n \r\n"
},
{
"id": "1027",
"short_description": "sample\r\n"
}
]
}
],
"totals": [],
"paging": {
"page": 1,
"current": 50,
"count": 3621,
"prevPage": false,
"nextPage": true,
"pageCount": 73,
"order": [],
"limit": 50,
"options": [],
"paramType": "querystring"
}
}
You are missing the in in your ng-repeat. Try:
<div ng-repeat="total in members.totals">
And your totals array is empty:
"totals": []
But I think your real problem is that your trying to access the wrong property and the right property isn't even available on $scope.members
myTable.controller('tableCtrl', function($scope, $http) {
$http.get("Table.json").success(function(response) {
debugger
$scope.members = response.events;
// you need the paging property which isn't in the events array
$scope.totals = response.paging;
});
});