I have two grids of text boxes as shown here:
Input Boxes
The goal is that the user would fill out the above boxes and then as they fill out the below boxes, the above boxes auto update. ie if you entered 100 in the first box on the top and then 75 in the first box at the bottom, the first box would change to 25.
I tried to use onchange() but was unsuccessful. v-model seems to cause some problems with its two way binding, which makes sense. Any help is appreciated.
Here is the HTML that populates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>
To start, split up the <td> nodes into child components, and emit their value on input change to the parent (main) component. Then use a method to calculate and set the remaining value for the "other" box child component (saved presumably inside an Array, you need to find the right element inside that Array in that method). The changed array will automatically update the other child component, as it is bound to the prop.
Related
I'm trying to hide whole column with all elements in that column when the checkbox is clicked. I'm wondering what's the best approach to solve that using Angular.
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" >
<td>{{user.Name}}</td>
<td>{{user.Email}}</td>
<td>{{user.Date}}</td>
</tr>
</tbody>
</table>
Above the table I have 3 checkboxes:
Name | Email | Date
I want to press one of them and then whole column disappears including <th> element and <td> element.
What could be the best idea for this problem?
To hide columns when a checkbox is selected.
In your .ts create 3 variables set to true for each column.
showName = true;
showEmail = true;
showDate = true;
in your respective checkboxes you need to add checked and change calls for each and match it to the 3 booleans above:
<input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>
<input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>
<input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>
And then add *ngIf in each related th and td for example for the name td and th:
<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>
declare class
export class ColumnVisible{
public nameVisible:boolean=true;
public emailVisible:boolean=true;
public dateVisible:boolean=true;
constructor(){}
}
call it in component
columnVisible:ColumnVisible;
in costructor initialize it with
this.columnVisible=new ColumnVisible();
inhtml write as class and give click event
<input [(ngModel)]="columnVisible.nameVisible" type="checkbox"(change)="columnVisible.nameVisible=!columnVisible.nameVisible" />
<input [(ngModel)]="columnVisible.emailVisible" type="checkbox"(change)="columnVisible.emailVisible=!columnVisible.emailVisible" />
<input [(ngModel)]="columnVisible.dateVisible" type="checkbox"(change)="columnVisible.dateVisible=!columnVisible.dateVisible" />
<table class="table">
<thead>
<tr>
<th ngIf="columnVisible.nameVisible" scope="col">Name</th>
<th ngIf="columnVisible.emailVisible" scope="col">Email</th>
<th ngIf="columnVisible.dateVisible" scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" class="{{user.IsShown}}" >
<td ngIf="columnVisible.nameVisible" >{{user.Name}}</td>
<td ngIf="columnVisible.emailVisible">{{user.Email}}</td>
<td ngIf="columnVisible.dateVisible">{{user.Date}}</td>
</tr>
</tbody>
</table>
Here's a little bit of code. stackblitz. You just need three different models for different checkboxes or use 1 property but with different types
Using angularjs
I have a table which column one I am binding it to a an array.
Second column is a dropdown.
I want to have other 5-6 columns (text and dropdown) which I want to show/hide based on the value of second column dropdown.
I tried the below code:
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td >{{item.name}}</td>
<td >
<select name="utype" class="form-control input-medium" ng-model="utype">
<option value="">---Please select---</option>
<option ng-repeat="type in types" >{{type.text}}</option>
</select></td>
<td><span ng-hide="utype =='Type1' || utype!=undefined" >{{item.value}}</span></td>
<td><button class="btn btn-small" ng-click="edit(item)">Edit</button></td>
</tr>
</tbody>
</table>
ng-hide="utype =='Type1' || utype!=undefined"
But this only works the first time. After hiding it does not work.
Could anyone point what I need to do to make it work:
utype!=undefined is always true after you set ng-model="utype"> the first time.
Take out utype!=undefined and try it.
<td><span ng-hide="utype =='Type1' >{{item.value}}</span></td>
Also, imo, you should use === rather than '=='. see this SO answer for details.
e.g.. ng-hide="utype ==='Type1'
I have designed dynamic input matrix table. In that need to add select all option for each column. How to do that?
Here code:
<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
<thead>
<tr>
<th>Features/Roles</th>
<th *ngFor="let column of TableConfiguration.columns;">
{{column.title}}
<th>
</tr>
</thead>
<tbody *ngFor=" let feature of featureNameList">
<tr>
<td>{{feature.name}}</td>
<td *ngFor="let a of feature.roles">
<input name="access" [(ngModel)]="a.access" type="checkbox"
(change)="accessArrayList($event)">
</td>
</tr>
</tbody>
</table>
Thanks in advance.
In this, if checkbox of HR checked, then all checkboxes belongs to HR column should select, likewise for unchecked state also.
I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?
I have a table that looks something like so
<table id="grid" class="table table-bordered table-hover table-inline">
<thead>
<tr>
<th>Id</th>
<th>Dropdown List</th>
<th><input id="selectAll" type="checkbox" /></th>
</tr>
</thead>
<tbody data-bind="foreach: stuff
<tr>
<td data-bind="text: someId"></td>
<td>
<select class="input-medium" data-bind="options: someStuff, optionsText:'DisplayName', optionsValue:'StandardCode'"></select>
</td>
<td>
<input type="checkbox" data-bind="value: someId"/>
</td>
</tr>
</tbody>
</table>
and then im my javascript I am iterating through the selected rows like this
$('grid input[type="checkbox"]:checked').each(function () {
var someSelectedId= $(this).val();
var dropDownlistValue= ??
});
I am using knockout to bind my data to the table and the drop down.
When i am iterating through the rows how do i get the selected value in the drop down list for each row as i am iterating through them? For the life of me i cant seem to figure it out. Thanks!
Use:
var dropDownlistValue = $(this).parent().prev().find('select.input-medium').val();
Or...
$(this).closest("tr").find("select.input-medium").val();
A.V's method is probably faster, but going to the TR allows more flexibility, as it'll find the select no matter where in the row it is.