Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a JSON object which needs to be searched if I input a angular form with two dates
I tried searching using a single date angular form control.
template code:
<div>
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Invoice summary</h5>
<hr>
<p class="card-text">Total revenue made by this venue: <strong>
{{totalRevenue}}</strong></p>
<p *ngIf="invoicesFiltered === true" class="card-text">Revenue
made on <strong>{{inputInvoiceDate}}</strong> is <strong>
{{filteredTotalRevenue}}</strong></p>
</div>
</div>
<div>
<div style="float:left;">
<label for="queryInvoiceDate">Start Date:</label>
<input
#queryInvoiceDate
(change)="filterInvoice(queryInvoiceDate.valueAsDate)"
type="date"
class="form-control"
style="width:100%">
</div>
<table class="table table-striped" [mfData]="filteredInvoices" #mf="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th>Advertiser Acct Balance</th>
<th>Service Fee Amt</th>
<th>Target Amt for Venue</th>
<th>Venue Acct Balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let invoice of mf.data">
<td>{{invoice.acntbalances}}</td>
<td>{{invoice.servicefeeamount}}</td>
<td>{{invoice.targetamount}}</td>
<td>{{invoice.targetbalance}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[10,15,20]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
component code:
filterInvoice(queryInvoiceDate: any) {
this.inputInvoiceDate = queryInvoiceDate.toISOString().split('T')[0];
this.filteredInvoices = (queryInvoiceDate) ?
this.invoices.filter(i =>
i.timestamp.includes(queryInvoiceDate.toISOString().split('T')[0])) : this.invoices;
console.log(queryInvoiceDate.toISOString());
this.filteredTotalRevenue = this.filteredInvoices.reduce((sum, invoice) => {
return sum + invoice.targetamount; }, 0);
}
What would i need to do if I want to pass two dates and search for all JSON values falling between the passed dates and specific timestamps?
I would strongly recommend using momentjs if you need to do anything with dates in javascript that isn't trivial. That is likely to be the case if you are writing a real-world application as opposed to a theoretical exercise. Javascript dates are messy and nasty, and you can see that you are already doing ugly things like .toISOString().split('T')[0] in order to extract the date. In momentjs, you can do something like moment(queryInvoiceDate1).isBefore(moment(i.timestamp)) && moment(queryInvoiceDate2).isAfter(moment(i.timestamp)) to filter the invoices by the date range. This will let you write much more readable and maintainable code.
On the other hand, the nice thing about ISO strings is that they can be compared vie lexicographical (alphabetical) sort, so '2018-09-01' is > '2018-08-01' and < '2018-09-03' for instance. So you could use your current method of extracting the date from the ISO string and simply use >= and <= operators in the filter.
Related
This question already has an answer here:
How to display the index data in a *ngFor?
(1 answer)
Closed 1 year ago.
I'm currently new angular, so if there is any mistake in my implementation then please let me know,
This my HTML code from component.html file
<table id="table">
<tr>
<th>Sl.No.</th>
<th>Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Skill</th>
<th>Gender</th>
</tr>
<tr *ngFor = " let i of counter()">
<td></td> <!-- To print the serial number here -->
<td>{{nameFromLocalStorage}}</td>
<td>{{emailFromLocalStorage}}</td>
<td>{{phoneFromLocalStorage}}</td>
<td>{{skillFromLocalStorage}}</td>
<td>{{genderFromLocalStorage}}</td>
<td>
<button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
</td>
</tr>
</table>
Here is code for counter() from component.ts file
counter() {
//TO DO
//Implementation is remaining,
return new Array(20);
}
The counter is supposed to return a value, the value is to be captured by the html file in the *ngFor directive and based on that it should create the required number of rows. Then I wanted to display the serial number in the first column of the table.
According to the code above I'm able to get 20 rows.
Note:- I have seen the solution in CSS and doesn't wish to implement until its the only option left.
My question is that how do I get the serial number there.
From my understanding i in the *ngFor directive should starts from zero so, is there anyway to directly display the value of i it self.
I'll be very glad if you can help me learn and correct my mistake.
Thank you in advance.
Yes you can loop it as simple dont know what your serial no is, if its from array then just use CounterArr.Serial_No.
<tr *ngFor = " let CounterArr of counter();let i = index;">
<td>{{i+1}}</td>
<td>{{CounterArr.nameFromLocalStorage}}</td>
<td>{{CounterArr.emailFromLocalStorage}}</td>
<td>{{CounterArr.phoneFromLocalStorage}}</td>
<td>{{CounterArr.skillFromLocalStorage}}</td>
<td>
<button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
</td>
</tr>
I have the following HTML code snippet where i am looping through my json response to display the data. It is a nested loop with *ngIf as in the HMTL below. What i need is based on the value of one of the items in the child loop i want to hide/show an item in the parent loop.
Basically i have mtr.eu inside the child loop which is an input type.Initially it will be empty and when the user enter any value in it, i want to show the item in the parent shown below. What would be the best suitable way to achieve this.
<div class="row accordian-head" accordion-heading>
<span class="w20">MPRN: {{header.gpr}}</span>
<span class="w20">Meter ID: {{header.num}}</span>
<span class="w20" *ngIf="mtr.eu">New data added</span>
</div>
<div class="accordian-inner-content">
<table class="table table-borderless">
<thead>
<tr class="meter-reading-header">
<th scope="col">Last read date</th>
<th scope="col">Last meter read</th>
<th scope="col">New reading (kWh)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mtr of header.mtrs" class="meter-reading-content">
<td>{{mtr.lrd}}</td>
<td>{{mtr.lrv}}</td>
<td>
<input type="number" name="newReading" class="form-control new-reading-input"
placeholder="eg. 12345" [(ngModel)]="mtr.eu">
</td>
</tr>
</tbody>
</table>
</div>
</accordion-group>
You can not use the child variables in the parent node. Instead, you can make a getter where you can check the records which has mu value. based on that getter value you can show the record on the parent element.
The only thing you need to do is write a function and pass your list of items into it. inside that use filter to check for required data(in your case its mt.mu). then return the data. Based on returned data you can show the element.
But when you call any function from the template it calls the function recursively.
So as a best practice I would prefer using pipes to do the same logic. Which makes my code much better.
I hope this helps you to achieve your need.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have to do something like this but i am kind of stuck in here.
So i have a table with header column as
Fe Ni Co Magnetic NonMagnetic
below each item, i have input box of value in which user can enter value.
In the above table Fe, Ni are magnetic and Co is Non-magnetic.
So, when user enters value under Fe and Ni, its sum get automatically inserted Under Magnetic and if he enter value for Co, its value will get inserted under NonMagnetic.
I have tried using id of box below item name and id of item but was unable to get this done. I want to do all this using html and javascript.
This is just a part of code. Whole code is way bigger. So i don't want to confuse, so i am just putting context of part code.
If anyone can suggest me some ways to do it. That will be helpful.
You can easily do this like so:
const feInput = document.getElementById('fe');
const niInput = document.getElementById('ni');
const coInput = document.getElementById('co');
const magnetic = document.getElementById('magnetic');
const nonMagnetic = document.getElementById('non-magnetic');
function updateMagnetic() {
const fe = feInput.value;
const ni = niInput.value;
magnetic.innerHTML = Number(fe) + Number(ni);
}
function updateNonMagnetic() {
const co = coInput.value;
nonMagnetic.innerHTML = Number(co);
}
feInput.addEventListener('input', updateMagnetic);
niInput.addEventListener('input', updateMagnetic);
coInput.addEventListener('input', updateNonMagnetic);
<table>
<thead>
<tr>
<th>Fe</th>
<th>Ni</th>
<th>Co</th>
<th>Magnetic</th>
<th>NonMagnetic</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fe" type="number" /></td>
<td><input id="ni" type="number" /></td>
<td><input id="co" type="number" /></td>
<td id="magnetic">0</td>
<td id="non-magnetic">0</td>
</tr>
</tbody>
</table>
First and foremost, hello! I'm new here.
I've been recently learning AngularJS and web development as I'm working so I apologize for my newbieness. I had stumbled upon a wall of sorts regarding datatable integration with AngularJS. Here's the structure of it:
<table class="datatable table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="form in forms | filter : {userName : activeFilter['user name']|rangeDate:activeFilter['range begin']:activeFilter['range end']:'birthDate'">
<td class="row-md-1">
<span ng-model="approvedForm.userName">
{{approvedForm.userName}}
</span>
</td>
<td class="row-md-1">
<span ng-model="approvedForm.birthDate">
{{approvedForm.birthDate}}
</span>
</td>
</tr>
</tbody>
</table>
I've to mention I make use of the filters on the client side, so they can choose the correct rows. The problem was that upon filtering some users and row-sorting with datatable, the data would get misteriously duplicated on the view, and I couldn't delete it or whatsoever. To solve it I had to take out the ng-repeat filters and filter with datatable filter support. Does anybody know what might have caused this behaviour?
Btw I'm using angularJS 1.x and datatable 1.10
Thanks!
Your data is duplicating because you bind it twice as the attribute of the HTML element and with handlebars. Remove either ng-model="..." attribute or {{...}} in your code so it would look like this:
<span>
{{approvedForm.userName}}
</span>
as #Shaishab Roy mentioned ng-model is not supposed to work with <span> so try ng-bind instead:
<span ng-bind="approvedForm.userName"></span>
I want to export a html table to Excel.
Table:
<div id="table">
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody id="tabbodyExp">
<tr>
<th>2.5</th>
<th>2.6</th>
</tr>
</tbody>
</table>
</div>
Script:
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#table').html());
e.preventDefault();
});
But excel is turning all numbers that are written like that "2.5" to Dates. Is there a way to stop that or do I have to write all number like that "2,5".
I found the answer on scunliffe's post here: Format HTML table cell so that Excel formats as text? As per that post, you can apply this special CSS property to the table cell and Excel will start treating the value as a string instead of formatting it as number (hopefully this works the same for your Dates):
mso-number-format:"\#"; /*force text*/
I know this is a old question but i will add my answer as it can help to other users that try to use numbers in excel.
In my case mso-number-format:"\#"; does not work so i use vnd.ms-excel.numberformat:0.0;
Example:
<th style="vnd.ms-excel.numberformat:0.0;">2.5</th>
or
<th style="vnd.ms-excel.numberformat:0.0;">2,5</th>