I have a table created using ng-repeat. In this table i have the used ng-repeat-start and ng-repeat-end in order to hide some row which will be visible only when the user wants to see it. Now my problem is that when i try to export this table to Excel the rows which are visible only appear in the excel also as there are rows which are linked each other appear as different rows(as in the table also they are different rows). Now what i want is that all the rows whether visible or not should appear in the excel. An is there a way that two rows which are linked to each other(as they contain data related to one single instance) can appear as single row in excel. Here is my code
function myCtrl($scope) {
$scope.exportData = function () {
var table = document.getElementById('exportable');
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
};
$scope.items = [{
"Name": "Name1",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "Name2",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="myCtrl">
<button ng-click="exportData()" >Export</button>
<br />
<table width="100%" id='exportable'>
<thead>
<tr >
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
<td>
<button ng-click="item.expanded=true">
more
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="item.expanded">
<td colspan=''>
</td>
<td colspan=''>
Hello
</td>
<td >
<button ng-click="item.expanded=false">
Hide
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Here is the Fiddle
Any Help would be appreciated Thanks.
use ng-show insted of ng-if fiddle
<tr ng-repeat-end ng-show="item.expanded">
Related
HTML
<tfoot>
<tr ng-repeat="prop in test" class="success">
<th class="text-right">#{{prop}}</th>
</tr>
</tfoot>
Angularjs
$scope.test = [
$scope.transSummary.total.toFixed(2),
$scope.transSummary.due.toFixed(2)
];
The above generates two of table footer instead of two columns. I did try ng-repeat in the tag th for generating two tg as columns but it does not work.
You can try something like this
https://jsfiddle.net/tufdjk2s/
<tr>
<th ng-repeat="prop in test">{{prop}}</th>
</tr>
I tried to get the values from the table while loading so that based on data value I can set the background color as an indication on my Dashboard. But am not to access the values can anyone help me.
Thank you.
HTML
<div class="row">
<div id="content1" class="toggle" style="display:none">
<div class="col-sm-8">
<div class="well">
<table id="table1" class="table table-hover" ng-show="mytable1">
<thead>
<tr>
<th></th>
<th>Operational Analysis</th>
<th></th>
<th></th>
<th ng-repeat="item in yearList">{{item.years}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="operation in dataOperationList">
<td class="details-control"></td>
<td>{{operation.reportTypeDetail}}</td>
<td>{{operation.reportFormula}}</td>
<td>{{operation.reportRang}}</td>
<td>{{operation.year5}}</td>
<td>{{operation.year4}}</td>
<td>{{operation.year3}}</td>
<td>{{operation.year2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I tried by jQuery
$(document).ready(function(){
$("#table1 tbody tr").each(function() {
// Within tr we find the last td child element and get content
alert($(this).find("td:last-child").html());
});
});
but it didnt work.
You can simply use ngClass directive, it allows you to dynamically add CSS classes to an element. https://docs.angularjs.org/api/ng/directive/ngClass
For example if you want to add a green background the a td element if it has 2019 as a content, first you should define a CSS class :
.green{ backgroud: green; }
Then, use the ngClass directive on the td element :
<td ng-class="{green: (operation.year2 == '2019')}">{{operation.year2}}</td>
Update :
You can also use ngStyle directive if want to get the color from a variable:
<td ng-style="{background: (operation.year2 == '2019')? colorValue : defaultColor}">{{operation.year2}}</td>
colorValue and defaultColor sould be defined somewhere.
Here is the correction, you can test it here : https://jsfiddle.net/abec/6f47jepq/4/
HTML part :
<body ng-app="operationApp" onload="showTableValue()">
<div class="row" ng-controller="operationController">
<div id="content1" class="toggle" style="display:none">
<div class="col-sm-8">
<div class="well">
<table id="table1" class="table table-hover" ng-show="mytable1">
<thead>
<tr>
<th></th>
<th>Operational Analysis</th>
<th></th>
<th></th>
<th ng-repeat="item in yearList">{{item.years}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="operation in dataOperationList">
<td class="details-control"></td>
<td>{{operation.reportTypeDetail}}</td>
<td>{{operation.reportFormula}}</td>
<td>{{operation.reportRang}}</td>
<td>{{operation.year5}}</td>
<td>{{operation.year4}}</td>
<td>{{operation.year3}}</td>
<td>{{operation.year2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function showTableValue() {
var tbl = document.getElementById('table1');
if (tbl != null) {
for (var j = 1; j < tbl.rows[1].cells.length; j++)
alert(tbl.rows[1].cells[j].innerHTML);
}
}
</script>
</body>
JS part :
var module = angular.module("operationApp", []);
module.controller("operationController", function($scope) {
$scope.mytable1 = true;
$scope.yearList = [{
"years": "2000,2001,2002,2003,2004"
}]
$scope.dataOperationList = [{
"reportTypeDetail": "Report type details 1",
"reportFormula": "Report Formula 1",
"reportRang": "Report Rang 1",
"year2": 1002,
"year3": 1003,
"year4": 1004,
"year5": 1005
},
{
"reportTypeDetail": "Report type details 2",
"reportFormula": "Report Formula 2",
"reportRang": "Report Rang 2",
"year2": 2002,
"year3": 2003,
"year4": 2004,
"year5": 2005
}
];
});
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<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>
I am trying to get data from json object and using ng-repeat show that data inside of a HTML table.
I am getting data with $http and later using ng-repeat for writing the rows of table.
This is my json object:
{
"tests": [
{
"date": "08/02/1999",
"name": "Test 1",
"test": "Raven"
},
{
"date": "11/09/1998",
"name": "Test 2",
"test": "PCT+"
},
{
"date": "13/01/2005",
"name": "Test 3",
"test": "PCT"
}
]
}
This is how I am trying to get json into angular variable:
var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
$http.get('GlobalData.json').success(function (data) {
$scope.tests = data;
});
});
And this is my HTML for table:
<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody ng:repeat="t in tests">
<tr>
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
This is the index page where I have calls to different views depending on which link is clicked. Table content is in first view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
<title>BatteryApp</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<link href="assets/style.css" rel="stylesheet" />
<script src="scripts/routes.js"></script>
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
Battery Application
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Add new battery
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Battery</b>
</td>
</tr>
</table>
</body>
</html>
Data is not shown on the page and I do not get any exception in browser console.
Second problem I have is that I do not see all files and folders from my solution in Chrome console:
I am missing Batteries folder where is the code I am using for my table and accessing to data.
So practically I am unable to debug it and try to find some errors.
Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js?
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="t in tests">
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
Change the location of the ng-repeat. The row should be repeating, not the table body, right?
As far as the missing folder is concerned, see if you have included the batter.js file in your index.html. Or share your index.html code
It looks like it should be Batteries/batteriesScript.js in the script tag
I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?
You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>