angular - print ng-table title dynamically - javascript

I am stuck at a point where i want to print the sub-heading title's dynamically using ng-table, header should be type1 type2 type3 and Details must be main head, subtype value must be sub-heading in details, please see picture attached below
any help is much aprreciated.

Try this out:
https://plnkr.co/edit/gypa0JDAZqhNwWcRQK93?p=preview
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table ng-table="tableParams">
<tr>
<td colspan="3"></td>
<td colspan="{{detailsCount}}" style="text-align:center">Details</td>
</tr>
<tr ng-repeat="i in dataObject">
<td title="'Type1'">{{i.type1}}</td>
<td title="'Type2'">{{i.type2}}</td>
<td title="'Type3'">{{i.type3}}</td>
<td ng-repeat="d in i.details" ng-init="detailsColCount(i.details)">{{d.subTypeCode}}</td>
</tr>
</table>
</body>
$scope.detailsCount = 0;
$scope.detailsColCount = function(details){
if (details.length > $scope.detailsCount) {
$scope.detailsCount = details.length;
}
};

Related

I'm having issues getting AngularJS to display my table correctly

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>

Angular2 Table does not build properly after filtering

I have got a problem with filtering a table in angular2.
Filtering works perfectly fine, but deleting the filter this does happen.
EDIT
When I start the program the filter is empty and the view is okay. When I filter for something everything is fine too. If I remove the filter again the elements are there but not in the table anymore... as you can see here.
The table does not rebuild as planned. The Lines are all over the place but not in the table anymore.
I have tried to simplify the html code. If you need to see more, please ask!
<table class="visible-lg-inline visible-md-inline visible-sm-inline table table-condensed">
<!-- the table head is defined here-->
<!--TABLE BODY-->
<tbody *ngFor="let detail of filteredDetails; let posi = index">
<tr>
<td (click)="showDetail(detail.itemId)">
<div><b>{{detail.itemName}}</b></div>
<div>{{detail.itemId}}</div>
</td>
<!-- the other cells as seen in picture-->
</tr>
<!-- only shown if showDetail is true -->
<tr *ngIf="detail.showDetail">
<td colspan="5">
<!-- some other divs and another table -->
</td>
</tr>
</tbody>
<!--FILTER-->
<tbody>
<tr>
<td>
<!-- some divs -->
</td>
<td colspan="3">
<input value="" [(ngModel)]="searchValue" (ngModelChange)="filterDetails()"/>
</td>
<td>
<!-- the button has nothing to do with the filter -->
</td>
</tr>
</tbody>
</table>
<table class="table table-condensed visible-xs-inline fixed">
<!-- the table head is defined here-->
<!--TABLE BODY-->
<tbody *ngFor="let detail of filteredDetails; let posi = index">
<tr>
<td (click)="showDetail(detail.itemId)">
<div><b>{{detail.itemName}}</b></div>
<div>{{detail.itemId}}</div>
</td>
<!-- the other cells as seen in picture-->
</tr>
<!-- only shown if showDetail is true -->
<tr *ngIf="detail.showDetail">
<td colspan="5">
<!-- some other divs and another table -->
</td>
</tr>
</tbody>
<!--FILTER-->
<tbody>
<tr>
<td>
<!-- some divs -->
</td>
<td colspan="3">
<input value="" [(ngModel)]="searchValue" (ngModelChange)="filterDetails()"/>
</td>
<td>
<!-- the button has nothing to do with the filter -->
</td>
</tr>
</tbody>
</table>
Here is the simplified Typescript Code (works more less like javascript - thats why I used that tag - hope that´s fine)
public filteredDetails: POSStockDetailWeb[];
public searchValue: string;
//the constructor an the init functions
filterDetails() {
if (this.searchValue == null || this.searchValue == "")
this.filteredDetails = this.POSStock.safePOSStockDetails;
else {
console.log(this.searchValue);
this.filteredDetails = [];
for (let detail of this.POSStock.safePOSStockDetails) {
if ((detail.itemId.indexOf(this.searchValue) !== -1) ||
(detail.itemName.indexOf(this.searchValue) !== -1)) {
this.filteredDetails[this.filteredDetails.length] = detail;
}
}
}
}
Thank you for your help!
If you need more input please ask!
I have tried it and it works When I change the filter it filters. The code I have tried is:
html:
<table>
<!-- the table head is defined here-->
<!--TABLE BODY-->
<tbody *ngFor="let detail of filteredDetails; let posi = index">
<tr>
<td>
<div><b>{{detail.itemName}}</b></div>
<div>{{detail.itemId}}</div>
</td>
<!-- the other cells as seen in picture-->
</tr>
</tbody>
<!--FILTER-->
<tbody>
<tr>
<td colspan="3">
<input value="" [(ngModel)]="searchValue"
(ngModelChange)="filterDetails()"/>
</td>
<td>
<!-- the button has nothing to do with the filter -->
</td>
</tr>
</tbody>
</table>
Ts code:
public filteredDetails: any[] = [];
public safePOSStockDetails: any[] = [{itemName: 'a', itemId: '1'},
{itemName: 'eea', itemId: '45'}, {itemName: 'eia', itemId: '12'}];
public searchValue = '';
filterDetails() {
if ( this.searchValue === '')
this.filteredDetails = this.safePOSStockDetails;
else {
this.filteredDetails = [];
for (const detail of this.safePOSStockDetails) {
if ((detail.itemId.indexOf(this.searchValue) !== -1) ||
(detail.itemName.indexOf(this.searchValue) !== -1)) {
this.filteredDetails.push(detail);
}
}
}
Found the problem.
To solve another problem with my normal table being too large for smartphones, I have used the css visible-sx-inline and for the large table: visible-sm-inline visible-md-inline...
I dont´t realy know why, but they have caused the problem.
#kimy82
Thank you for your help!
I would be interested in the results of the simple version with the classes in it.
(if you still have it and the time for doing so)

Clone a <tr> and modify the clone's content in JavaScript / jQuery

I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks
Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");

HTML javascript: expanding function changes the level relationship incorrectly

The problem is explained in the picture below. Once clicking the expanding function of "Parameter 1", the level of "Parameter 2" will change as seen in the middle picture. But actually it should remain in the same level.
Any suggestion is highly appreciated. Thanks in advance.
JAVASript
$('.P1').click(function() {
$(this).find('span').text(function(_, value) {
return value == '-' ? '+' : '-'
});
$(this).closest('tr').nextUntil('tr:has(.P2)').slideToggle(100, function() {});
});
$('.Sub-parameter-1').click(function() {
$(this).find('span').text(function(_, value) {
return value == '-' ? '+' : '-'
});
$(this).closest('tr').nextUntil('tr:has(.Sub-parameter-2)').slideToggle(100, function() {});
});
HTML
<table width="200" border="1">
<tr>
<td rowspan="6">Summary </td>
<td colspan="3">
<div align="center">1 st level</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="P1"><span>-</span>Parameter 1</div>
</td>
</tr>
<tr>
<td rowspan="3">L1</td>
<td colspan="2"><div class="Sub-parameter-1"><span>-</span>Sub parameter (1)</div></td>
</tr>
<tr>
<td>L2</td>
<td>description</td>
</tr>
<tr>
<td colspan="2"><div class="Sub-parameter-2"><span>-</span>Sub parameter (2)</td>
</tr>
<tr>
<td colspan="3">
<div class="P2">Parameter 2</div>
</td>
</tr>
</table>
JSFiddle: https://jsfiddle.net/gft08cmb/4/
EDIT based on answer
When applying the answer to more than 1 row of sub parameter, then the "Parameter 2" still changes its level seen in following link.
https://jsfiddle.net/gka7312L/ or https://jsfiddle.net/p2a2wxfv/1/
Your rowspan attribute in L1 is making problems since it should change from 3 to 2 and back in your case.
This works as you would want I think: https://jsfiddle.net/gft08cmb/6/
You should of course make it dynamic if your data is going to be dynamic also.
So probably a count of rows etc. and then manipulate based on this.
Let me know if you need further help.

How to convert an HTML table to plain text and save it into a variable in JavaScript

I was checking the site and found JavaScript: How to strip HTML tags from string? but this doesn't really explains how to take this:
<tr id="element.incident.comments.additional">
<td colspan="2">
<span style="">
<table cellpadding="0" cellspacing="0" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
<tr style="">
<td class="tdwrap"><strong>2014-01-23 14:45:40 - <a style="color:blue" href="sys_user.do?sysparm_view=itil&sysparm_query=user_name=Superhero#superhero.com">SuperHero</a></strong></td>
<td align="right" nowrap="true"><sup>Additional comments</sup></td></tr>
<tr style="">
<td colspan="2"><span style="word-wrap:break-word;">received from: SDUperhero#superhero.com<br><br>lalalalalala
<br>lotsofwords<br><br><br><br><br><br>
The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material</span></td></tr></tbody></table></span></td>
</tr>
and get the text inside:
<tr id="element.incident.comments.additional">
for further parsing.
I tried with
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
var commentsField = document.getElementById("element.incident.comments.additional").innerHTML;
alert(strip(commentsField));
but I'm not sure if this is the right way as I'm not getting anything in the alert.
Any thoughts?
Because you have . in your ids, you will need to escape them in your jQuery selector:
$("#txt").val($("#element\\.incident\\.comments\\.additional").html());
and that should work.
jsFiddle: http://jsfiddle.net/hescano/EQ9b3/

Categories