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/
Related
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;
});
});
I have a 2d array which has data something like this,
categoryinfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}
categoryinfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}
categoryinfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}
I want to display these data according to the category, As you can see the [0]the index has all the fruit items and the [1]index has all the meat items.
I want to display these as,
Fruits
Apple
Orange
meat
fish
<table>
<thead>
<tr>
<th>{{categoryinfo[0][0].category.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="formnames in categoryinfo">
<td>{{formnames[0].name}}</td>
</tr>
<tr ng-repeat="formnames in categoryinfo">
<td>{{formnames[1].name}}</td>
</tr>
</tbody>
</table>
to be more specific something like this above. But I cant figure out how to do this dynamically without hardcoding like this.
2D arrays are just arrays in an array, just loop over them layer by layer will do.
<table>
<thead ng-repeat-start="category in categoryinfo">
<tr>
<th>{{category[0].category.name}}</th>
</tr>
</thead>
<tbody ng-repeat-end>
<tr ng-repeat="item in category">
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
You repeat them using $index.
The first iteration iterates over y(vertical) and then the one inside gives you x(horizontal) values.
Have a look at the code below.
var app = angular.module('repeatSamples', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.categoryinfo = [];
$scope.categoryinfo[0] = []
$scope.categoryinfo[0][0] = {
"name": "apple",
"category": {
"name": "fruits",
"id": "09a8597d"
}
}
$scope.categoryinfo[0][1] = {
"name": "orange",
"category": {
"name": "fruits",
"id": "09a8697d"
}
}
$scope.categoryinfo[1] = []
$scope.categoryinfo[1][0] = {
"name": "fish",
"category": {
"name": "meat",
"id": "09a8447d"
}
}
$scope.categoryinfo[1][1] = {
"name": "mutton",
"category": {
"name": "meat",
"id": "09a8447d"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body ng-app="repeatSamples" ng-controller="MainCtrl">
<table class="table-bordered" ng-repeat="category in categoryinfo">
<thead>
<tr>
<th>{{category[$index].category.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="formnames in categoryinfo[$index]">
<td>{{formnames.name}}</td>
</tr>
</tbody>
</table>
</body>
As Commented,
I guess this should do it, though not tried <div ng-repeat="c in category"><h3>{{c[0].category.name}} <p ng-repeat="list in c">{{list.name}}</h3>
Idea:
Since you have 2-D array, you will have to use 2 loops. One to iterate over parent list and other to loop over child list.
Also since you have already grouped items based on category, you can access first element for title.
If the data structure is not fixed and you can change it, you can look into creating a hashmap. You would still need 2 loops but that might make it easier to retrieve data.
function MainCtrl($scope) {
$scope.categoryInfo = {
fruits: [
{"name": "apple","id": "09a8597d"},
{"name": "orange", "id": "09a8697d"}
],
meat: [
{"name": "fish", "id": "09a8447d"}
]
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">
<div ng-repeat="(key, value) in categoryInfo">
<h3>{{key}} </h3>
<p ng-repeat="list in value">{{list.name}}</p>
</div>
</body>
Sample code:
function MainCtrl($scope) {
var categoryInfo = [[],[]]
categoryInfo[0][0] = {"name": "apple", "category": { "name": "fruits","id": "09a8597d"}}
categoryInfo[0][1] = {"name": "orange", "category": { "name": "fruits","id": "09a8697d"}}
categoryInfo[1][0] = {"name": "fish", "category": { "name": "meat","id": "09a8447d"}}
$scope.categoryInfo = categoryInfo;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body ng-app ng-controller="MainCtrl">
<div ng-repeat="c in categoryInfo">
<h3>{{c[0].category.name}} </h3>
<p ng-repeat="list in c">{{list.name}}</p>
</div>
</body>
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;
});
});