rowspan in angular application - javascript

I have the following table in an Angular 8 application where I am looping through some data and displaying the data in the table. In the table I want to use rowspan for "Status" and "Create Date" since these will always be the same. "Name" and "Amount" will differ so need different rows for them but a single entry for Status. I tried rowspan="abc.length" for {{data.status}} but it does not work.
<table class="table tableBorder table-responsive table w-100">
<tr style="text-align: center;" class="bg-gray">
<td class="w-12 bold text-left">Name</td>
<td class="w-10 bold text-left">Amount (Rs.Cr.)</td>
<td class="w-13 bold text-left">Status</td>
<td class="w-8 bold text-left">Create Date</td>
</tr>
<tr *ngFor="let data of abc; let i = index">
<td class="w-12 truncate-text ref-number-truncate line-height23">
{{data.name}}
</td>
<td class="w-8 truncate-text">{{data.amount}}</td>
<td class="w-13 truncate-text">{{data.status}}</td>
<td class="w-10 truncate-text">{{data.createdDate}}</td>
</tr>
</table>


Try [attr.rowspan] as
<td [attr.rowspan]= "abc.length">

Related

unable to bold a particular word inside td tag of a table in angular

I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name1:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name2:</td>
<td class="content_column">{{element[0].matched_keyword}}</td>
</tr>
<tr>
<td class="header_column">Subject1:</td>
<td class="content_column">{{element[0].nlp_matched_sentence}}</td>
</tr>
<tr>
<td class="header_column">bold value1:</td>
<td class="content_column">{{x}}</td>
</tr>
<tr>
<td class="header_column">bold value2:</td>
<td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
</tr>
</table>
.ts file
element = [
{
id: 5636,
matched_keyword: "test",
nlp_matched_sentence:
"The <strong>Air Force</strong> Test Center"
}
];
after my research I got 3 solutions but none of them are working for me. please check the demo for more information.
stackbliz demo

Take a look at demo code
You need to add [innerHTML] as below:
<td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>

To set html content programatically, we need to use innerHTML.
To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}
To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""
Change your html code like below,
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name:</td>
<td class="content_column">{{ element[0].matched_keyword }}</td>
</tr>
<tr>
<td class="header_column">Subject:</td>
<td class="content_column">
<div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
</td>
</tr>
<tr>
<td class="header_column">bold value:</td>
<td class="content_column"><div innerHTML="{{ x }}"></div></td>
</tr>
</table>

How to reduce one column and increase other one in CSS?

I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>

your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.

To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,

the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.

can i use two ng-repeat in inside td table?

my current result
Expected result
Please guide me how to use two ng-repeat inside one td. when i use span tag after i am not getting expected result.i have use one ng-repat in td and other i have use in span tag so i am not getting expected result so how to use two ng-repeat in one td.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{"year":2006,"quarters":{"q4":{"kk":5.0,"fl":0.0}}},{"year":2007,"quarters":{"q1":{"kk":9.0,"fl":0.0},"q2":{"kk":8.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2008,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":4.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2009,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":6.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2010,"quarters":{"q1":{"kk":7.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":7.0,"fl":0.0},"q4":{"kk":6.0,"fl":0.0}}},{"year":2011,"quarters":{"q1":{"kk":8.0,"fl":0.0},"q2":{"kk":7.0,"fl":0.0},"q3":{"kk":9.0,"fl":0.0},"q4":{"kk":8.0,"fl":0.0}}},{"year":2012,"quarters":{"q1":{"kk":0.0,"fl":0.0},"q2":{"kk":9.0,"fl":0.0},"q3":{"kk":8.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2013,"quarters":{"q1":{"kk":6.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":4.0,"fl":0.0},"q4":{"kk":0.0,"fl":0.0}}},{"year":2014,"quarters":{"q1":{"kk":3.0,"fl":0.0},"q2":{"kk":2.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2015,"quarters":{"q1":{"kk":5.0,"fl":0.0},"q2":{"kk":0.0,"fl":0.0},"q3":{"kk":6.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2016,"quarters":{"q1":{"kk":0.0,"fl":0.0},"q2":{"kk":5.0,"fl":0.0},"q3":{"kk":4.0,"fl":0.0},"q4":{"kk":4.0,"fl":0.0}}},{"year":2017,"quarters":{"q1":{"kk":3.0,"fl":0.0},"q2":{"kk":8.0,"fl":0.0},"q3":{"kk":3.0,"fl":0.0},"q4":{"kk":5.0,"fl":0.0}}},{"year":2018,"quarters":{"q1":{"kk":6.0,"fl":0.0},"q2":{"kk":7.0,"fl":0.0},"q3":{"kk":8.0,"fl":0.0},"q4":{"kk":3.0,"fl":0.0}}},{"year":2019,"quarters":{"q1":{"kk":2.0,"fl":0.0},"q2":{"kk":4.0,"fl":0.0},"q3":{"kk":6.0,"fl":0.0},"q4":{"kk":7.0,"fl":0.0}}},{"year":2020,"quarters":{"q1":{"kk":8.0,"fl":0.0}}}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<table class="table table-bordered" ng-app="myApp" ng-controller="myCtrl">
<tr>
<th colspan="2">Year</th>
<td colspan="4" data-ng-repeat="years in records" ng-bind="years.year"></td>
</tr>
<tr>
<td style="border:0">Question</td>
<td style="border:0"> </td>
<td data-ng-repeat="years in records">
<span class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
data-ng-init="asdasd()" ng-bind="key "></span>
</tr>
<tr>
<td rowspan="3" colspan="1">A205</td>
<td>KK</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.kk" ng-model="value.kk"></td>
</tr>
<tr>
<td>FL</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.fl" ng-model="value.fl"></td>
</tr>
<tr>
<td>Total</td>
<td data-ng-repeat="years in records"><input type="number" class="yearStyle text-center" data-ng-repeat="(key, value) in years.quarters"
ng-bind="value.fl + value.kk" ng-model="value.fl + value.kk"></td>
</table>

Problem is in your json data. You should have an Array of objects in years.quarters json property so that it can loop through in data-ng-repeat="(key, value) in years.quarters"
Currently, your years.quarters property is an object

Filter in more than 1 column of a table in angular js

I am trying to add a filter on more than one column of a table which is being populated by ng-repeat directive.
<tr ng-repeat="descriptiveField in vm.descriptiveFieldList|filter:{name:vm.searchText}" ng-class-even="'even-bgcolor'">
<td ng-bind=descriptiveField.name></td>
<td ng-bind="descriptiveField.fieldDescription></td>
<td style="text-align: left" ng-bind=descriptiveField.source></td>
</tr>
I have search box as
<input type="text" ng-model="vm.searchText" class="search-input"/>
The filter is getting applied on Name only. I would to search on 2 columns name and source. How to do that?

Use $ to filter any fields (same level or deeper):
<tr ng-repeat="descriptiveField in vm.descriptiveFieldList | filter:search:strict}" ng-class-even="'even-bgcolor'">
<td ng-bind=descriptiveField.name></td>
<td ng-bind="descriptiveField.fieldDescription></td>
<td style="text-align: left" ng-bind=descriptiveField.source></td>
</tr>
<input type="text" ng-model="search.$" class="search-input"/>

How to compare cell values and hide rows in a html table

I have the following table dynamically generated. Number of columns is dynamic and is between 4-12 based on user selection.
<table>
<tr>
<th class="roleComparethead">Function</th>
<th class="roleComparethead"">Type</th>
<th class="roleComparethead">1111</th>
<th class="roleComparethead">222</th>
<th class="roleComparethead">555</th>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type"> Internal </td>
<td class="access"><span class="accessLevel">Update</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">NoAccess</span> </td>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type""> Internal </td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span> </td>
</tr>
I want to hide rows in the table if values of all cells with class="accessLevel" in that row are same and display only if the values are different. How do i achieve this using jQuery or Javascript?
Thank you.

You can try this solution
http://jsfiddle.net/mjaric/aLWVM/
It can be done in less lines, but I in purpose split it to more. Check it out and let me know if behaviour is correct.

Categories

Resources