I am creating a transaction tracker as a MEAN project and is stuck in here. I need to show all the transactions using ngFor. I want to show the Difference of credit and debit amount with the previous balance added to it after each transaction. Any idea how to do it?
This is my ngFor Code.
<tbody>
<tr *ngFor="let trans of transactions; index as i;">
<td>{{ trans.date | date:'dd-MM-yyyy'}}</td>
<td>{{ trans.billNo }}</td>
<td>{{ trans.description }}</td>
<td>{{ trans.creditAmt }}</td>
<td>{{ trans.debitAmt }}</td>
<td>{{ trans.debitAmt + trans.creditAmt + (DONT KNOW HOW TO ADD THE PREVIOUS BALANCE)}} </td>
</tr>
</tbody>
In my table now you can see, the balance is not being calculated properly.
How can I do this? How to store balance after each ngFor iteration and display it? None of my logic seems to be working.
<tbody>
<tr *ngFor="let trans of transactions; index as i;">
<td>{{ trans.date | date:'dd-MM-yyyy'}}</td>
<td>{{ trans.billNo }}</td>
<td>{{ trans.description }}</td>
<td>{{ trans.creditAmt }}</td>
<td>{{ trans.debitAmt }}</td>
<td>{{ trans.debitAmt + + (DONT KNOW HOW TO ADD THE PREVIOUS BALANCE)}} </td>
</tr>
</tbody>
Well, you have the index. If i != 0..
(trans.creditAmt - trans.debitAmt) + (transactions[i - 1].debitAmt + trasnactions[i - 1].creditAmt)
You should do this in the component, though. As you'll need to create a variable to keep track of the previous balance, as it's also a calculation.
Related
I have an API resulted as in picture. And I want to show the result in Laravel Blade. So I use this code:
#if(isset($data))
#foreach ($data as $had)
<tr>
<th scope="row">#</td>
dd({{ $had['data']['NoHdt'] }});
<td>{{ $had['data']['NoHdt'] }}</td>
<td>{{ $had['data']['Kitab'] }}</td>
<td>{{ $had['data']['Isi_Indonesia'] }}</td>
</tr>
#endforeach
#endif
</tbody>
But it always resulted
Undefined index: data
How to make it right?
Try this
#foreach ($apiResult['data'] as $data)
<tr>
<th scope="row">#</td>
<td>{{ $data['NoHdt'] }}</td>
<td>{{ $data['Kitab'] }}</td>
<td>{{ $data['Isi_Indonesia'] }}</td>
</tr>
#endforeach
where $apiResult correspond your shared dd screen https://i.stack.imgur.com/YQWfi.png
You can try the following instead.
#if(isset($data))
#foreach ($data as $had)
<tr>
<th scope="row">#</td>
dd({{ $had->NoHdt }});
<td>{{ $had->NoHdt }}</td>
<td>{{ $had->Kitab }}</td>
<td>{{ $had->Isi_Indonesia }}</td>
</tr>
#endforeach
#endif
</tbody>
In the below table I have been using data to store in a array format
which should be stored in a single row in database table.
<table class="table">
<tr>
<th>transaction_number</th>
<th>date</th>
<th>item_number</th>
<th>desc</th>
<th>variant_code</th>
<th>quantity</th>
<th>cost</th>
</tr>
#php ($current_transaction_number = null)
#foreach ($items as $item)
#if ($loop->index > 0 && $current_transaction_number != $item->transaction_number)
#include ('subtotal', compact('items', 'current_transaction_number'))
#endif
<tr>
#if ($current_transaction_number == $item->transaction_number)
<td colspan="2"></td>
#else
#php ($current_transaction_number = $item->transaction_number)
<td>{{ $item->transaction_number }}</td>
<td>{{ $item->date }}</td>
#endif
<td>{{ $item->item_number }}</td>
<td>{{ $item->desc }}</td>
<td>{{ $item->variant_code }}</td>
<td>{{ $item->quantity }}</td>
<td>{{ $item->cost }}</td>
</tr>
#if ($loop->last)
#include ('subtotal', compact('items', 'current_transaction_number'))
#include ('total', compact('items'))
#endif
#endforeach
</table>
I'm not sure that I understand the question fully, and I don't see the reason for storing all of that data in one column, but you can definitely do that using MySQL JSON field.
In your migration use $table->json('name_of_the_column')->nullable(); to create this column.
In your model add:
protected $casts = [
'name_of_the_column' => 'array'
];
Then you will be able to retrieve stuff like Model::where('name_of_the_column->name_of_the_property', 'Key')->get();
For more details, you can see this link: https://www.qcode.in/use-mysql-json-field-in-laravel/
I hope this helps.
I'm developping web appliccation using AngularJS.
Applicattion show a list of items in a table.
This is the code which prints the table:
<table>
<tr ng-repeat="x in content.listaOperaciones>
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
</table>
This is how the table looks like once is printed in html.
I would like to implement multiple filters in each element in table by using some variables that can be accessed by user.
My idea is to filter each elements inside "ng-repeat" statement by using "ng-show" or "ng-if" statement.
This is the html code where user can modify variables:
<input ng-model="tiempoMinimo">
<input ng-model="$ctrl.PesoMinimo">
<input ng-model="$ctrl.PesoMaximo">
And this is how I'm modifying the table constructor:
<tr ng-repeat="x in content.listaOperaciones | orderBy : $ctrl.orderProp | filter:$ctrl.Busc" ng-if="x.peso > $ctrl.PesoMinimo && x.peso < $ctrl.PesoMaximo">
<div ng-show="x.duracion < $parent.tiempoMinimo">
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
Filtering by using "ng-if" inside "ng-repeat" clausule is working.
Filtering by using "ng show" nested in "ng-repeat" loop is not working...
Since I want to use multiple filters (maybe 10 or 20) I would prefer using "ng-show" directive nested inside "ng-repeat" loop, so code would like easier to understand...
Here you have fiddle with source code working:
https://jsfiddle.net/DSG00/f94sjtty/
Thank you in advance.
Didac
Your fiddle isn't working because you can't use div inside tr. Move your ng-show to the tr element where your ng-repeat is. Also change the condition like that !$parent.tiempoMinimo || x.peso > $parent.tiempoMinimo so when your input is empty it won't hide the whole table.
My code is something like below..
<tr ng-repeat="x in employee">
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
<td>{{ x.company }}</td>
</tr>
Name Age Company
John 25 Apple
Jim 26 Apple
Joe 27 Microsoft
Sam 28 Microsoft
Now I want the first 2 rows to be displayed in a color say red and the last 2 rows to be displayed in another color say blue based on the company name. I want to do this without hard coding the company name.
Use ngClass directive like:
<tr ng-repeat="x in employee" ng-class="{{x.company | lowercase}}">
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
<td>{{ x.company }}</td>
</tr>
Then define those classes in your CSS:
.apple{
background-color:red;
}
.microsoft{
background-color:blue;
}
I'm tring to figure out how I could us the ngSwitch with ngRepeatStart and End on two table rows, where second row is only shown when you click on the top one.
Here's what I've got and want to make work (doesn't work):
<tr
data-ng-repeat-start="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-repeat-end data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
and here's what works:
<tbody
data-ng-repeat="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<tr>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
</tbody>
I would like to avoid the wrapping tbody tag and instead use ngRepeatStart / End.
Is there a way of modifying my first example to make it work?
Don't use ng-switch, just use ng-show or ng-if. Here's a plunker
Edit
Okay, I guess if you really want you can use ng-switch, though I would suggest not doing it if all you're doing is checking true/false. Here's the updated plunker. The trick is that the switch needs to be on the second <tr>, and the ng-switch-when needed to be on the <td>.
Now if you need each switch to be a table row, then you're just going to have to use ng-if. The ng-switch attribute needs to be on the parent of all the ng-switch-when's. That's why the switch only works when you put it on <tbody>, or when you switch over <td>'s.