Dynamic table Javascript - Angular 2 - javascript

I m trying to access to some information in a table by HTML and it is working, but I would like to do it after clicking a button and not onInit, so I guess that I need to do it by Javascriptor Typescript
It would be perfect to create the table by HTML but filling it by Javascript or Typescript after clicking the button.
The table is the following:
HTML
<table id="myTableSystems" class="table table-bordred table-striped">
<thead>
<th>{{ 'Checkbox' | translate }}</th>
<th>{{ 'MappingMult' | translate }}</th>
</thead>
<tbody>
<tr *ngFor="let receiver of testCase.receivers;" class="pointer">
<td>
<input type="checkbox">
</td>
<td>{{receiver.mappingMult}}</td>
</tr>
</tbody>
</table>

In your component.ts file you will need to create a function to fill the object "testCase".
I'm not sure how the component is getting/receiving the data for "testCase". You will need to refactor the logic so that you get the data for "testCase" in the fillData function.
component.ts
public fillData(): void {
this.testCase.receivers = [{mappingMult: 'data'}];
}
component.html
<button type="button" (click)="fillData()" class="">Click To Fill Data</button>
<table *ngIf="testCase" id="myTableSystems" class="table table-bordred table-striped">
<thead>
<th>{{ 'Checkbox' | translate }}</th>
<th>{{ 'MappingMult' | translate }}</th>
</thead>
<tbody>
<tr *ngFor="let receiver of testCase.receivers;" class="pointer">
<td>
<input type="checkbox">
</td>
<td>{{receiver.mappingMult}}</td>
</tr>
</tbody>

Related

How to send data from index.html to views.py in django

I have a table contains a list of fifty companies(items) on a side there is a button. I want to send the name of the company from the table in which user is clicked.
Code of index.html :
<table class="table table-striped table-dark" cellspacing="0">
<thead class="bg-info">
<tr>
<th>Company's Symbol</th>
<th>Current Price</th>
<th>View Current chart</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for a,b in stocks %}
<tr>
<th scope="row" class="comp_name">{{ a }}</th>
<td>{{ b }}</td>
<td>
<input type="submit" class="btn graph-btn" name="_graph" value="View Graph">
</td>
<td>
<input type="submit" class="btn predict-btn" name="_predict" value="Predict Closing Price">
</td>
</tr>
{% endfor %}
</tbody>
</table>
There are two buttons for different URL. Like when user liked on .graph-btn it will go to a different URL.
Help.
If you want to go to another path (Route) that needs variables
in your template you can use the url function as shown below :
.....
if you want to get the same result from your python code user reverse method
return HttpResponseRedirect(reverse('url_path', args(var1)))
for more check django's documentation here

Angular - hide/show column in a table when checkbox is selected

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

angular js search by column

I have data like
{ column : [a,b,c], data : [["a",1,2],["b",4,5],["c",3,2]]}
table structure
<input type="text" ng-module="search">
<thead>
<tr>
<th ng-repeat="n in column" ng-click="click($index)">n</th>
</tr>
</thead>
<tr ng-repeat="i in data | filter:search">
<td ng-repeat="j in i">i</td>
</tr>
how to make a search logic by columns?
I could search by any input but not by specific column

Angular, limit sub repeat [duplicate]

This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!
You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.

Get value of parent item using child slug ng-repeat

I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>

Categories

Resources