So here's my html code:
<div class="container">
<div>
<h1 class="table-title">Employees</h1>
<table class="table">
<thead class="thead-dark">
<tr>
<th>User Name</th>
<th>Email</th>
<th>Role</th>
<th>References</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tempEmployee of employees">
<td class="align-middle">{{ tempEmployee.userName }}</td>
<td class="align-middle">{{ tempEmployee.email }}</td>
<td class="align-middle">{{ tempEmployee.roleId }}</td>
<td class="align-middle">
<a routerLink="/projects">Assigned Projects</a>
<br />
Assigned Tickets
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Select 1 or multiple users</h4>
<select id="user-list" multiple size="employees.length" >
<option
*ngFor="let employee of employees; let indexOfEmployee=index;"
value="indexOfEmployee"
>{{ employee.userName }}</option>
</select>
<button id="submit" type='submit' class="btn btn-primary" (click)="onSubmit()">Submit</button>
</div>
</div>
I'm confused on how I can know if an option is selected so that in the component on the onSubmit() function i can check if an option is selected and submit it. Also multiple options can be selected.
I tried to console.dir the option element to see if it has a selected property but maybe i'm missing something.
some quick and easy javascript:
for(var i = 0; i < document.getElementById("user-id").length; i++){
if(document.getElementsByTagName("option")[i].selected == true){
console.log("selected")
}
}
Related
I have this table:
<table class="table table-striped">
<thead>
<tr>
<td *ngFor="let col of columns">{{col.descr}}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let col of columns">
<input type="checkbox" [(ngModel)]=row[col.name] (ngModelChange)="changeCheck($event)"/>
{{row[col.name]}}
</td>
</tr>
</tbody>
</table>
<div>
<button mat-raised-button (click)="addColumn()"> Add column </button>
</div>
and I need to add a column enter data and save.
How can insert a new column using html and typescript?
I want to create a table with 2 columns: Name, Email. Everytime I press the edit button, I want to transform the td into editable inputs. The problem is that if I have more users and I press the edit button, all users will become editable, not just the selected one. How can I solve this problem?
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="!editUser">{{ user.name }}</td>
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>
<td *ngIf="!editUser">{{ user.email }}
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>
<td *ngIf="!editUser">
<a class="action-btn" (click)="onEdit()">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
editUser: boolean = false
onEdit() {
this.editUser = !this.editUser
}
How the table looks before pressing the red button
How the table looks after pressing the button
Thank you for your time! (this is what I want to achieve
Do you have an id for the user?
Then you could do something like:
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="editUserId !== user.id">{{ user.name }}</td>
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>
<td *ngIf="editUserId !== user.id">{{ user.email }}
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>
<td *ngIf="editUser !== user.id">
<a class="action-btn" (click)="onEdit(user.id)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
and
editUserId: number;
onEdit(userId: number) {
this.editUserId = userId;
}
Try this, it will work for you.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList; index as i">
<td *ngIf="i!=selectedRowIndex">{{ user.name }}</td>
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.name"></td>
<td *ngIf="i!=selectedRowIndex">{{ user.email }}
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.email"></td>
<td>
<a class="action-btn" (click)="onEdit(i)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
selectedRowIndex = -1
onEdit(rowIndex) {
this.selectedRowIndex = rowIndex;
}
I am new in angular and I am using ngFor inside a to populate a table. My question is, if the array that is present[let i of user.acessTypes] in ngFor is empty how can I show an "Is Empty" string information in the correspondent row?
This is my table html
<table class="table table-bordered">
<tr>
<th>Email</th>
<th>Acess Type</th>
</tr>
<tr *ngFor="let user of listUser">
<td>{{user.email}}</td>
<td>
<button class="btn btn-primary"
*ngFor="let i of user.acessTypes">
//if i is empty show "Is Empty"
{{i.accessTypeName}}({{i.subAcessTypeName}})
</button> </td>
</tr>
</table>
This is my JSON response
{
"data": [
{
"id": 1,
"email": "jose#hotmail.com",
"password": "$2a$10$44ghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.XEh7avm2GOxlUC",
"isAdmin": 0,
"acessTypes": [
{
"id": 1,
"accessTypeName": "User",
"subAcessTypeName": "Ver&Escrever"
}
],
"tomas": [],
"consultas": [],
"profile": "NORMALUSER"
}
],
"dataArray": null,
"errors": []
}
There are several approaches. One of them is working with an if-else statement the Angular way. Both ng-container and ng-template won't be part of the DOM tree after they are rendered.
Here is a nice resource that explains it in more detail: https://toddmotto.com/angular-ngif-else-then
<table class="table table-bordered">
<tr>
<th>Email</th>
<th>Acess Type</th>
</tr>
<tr *ngFor="let user of listUser">
<td>{{user.email}}</td>
<td>
<ng-container *ngIf="user.acessTypes.length > 0; else noAccessTypes">
<button class="btn btn-primary" *ngFor="let i of user.acessTypes">
{{i.accessTypeName}}({{i.subAcessTypeName}})
</button>
</ng-container>
<ng-template #noAccessTypes>
<button class="btn btn-primary">Is empty</button>
</ng-template>
</td>
</tr>
</table>
<table class="table table-bordered">
<tr>
<th>Email</th>
<th>Acess Type</th>
</tr>
<tr *ngFor="let user of listUser">
<td>{{user.email}}</td>
<td>
<button class="btn btn-primary"
*ngFor="let i of user.accessTypes">
//if i is empty show "Is Empty"
{{i.accessTypeName}}({{i.subAcessTypeName}})
</button>
<button class="btn btn-primary" *ngIf="user.accessTypes.length == 0">Is Empty</button>
</td>
</tr>
</table>
You can just check using *ngIf as follows,
<button class="btn btn-primary" *ngFor="let i of user.acessTypes">
<ng-template *ngIf="i">
{{i.accessTypeName}}({{i.subAcessTypeName}})
</ng-template>
<ng-template *ngIf="!i">
Is Empty
</ng-template>
</button> </td>
Simply you can create a proper validation check as follows.
<table class="table table-bordered">
<tr>
<th>Email</th>
<th>Acess Type</th>
</tr>
<tr *ngFor="let user of listUser">
<td>{{user.email}}</td>
<td>
<button class="btn btn-primary"
*ngFor="let i of user.acessTypes">
<div *ngIf="i.accessTypeName.length == 0">
Is Empty
</div>
<div *ngIf="i.accessTypeName.length != 0">
{{i.accessTypeName}}({{i.subAcessTypeName}})
</div>
</button>
</td>
</tr>
</table>
Cant I display one value of th element in tr with ng-repeat?
This is how my html looks
<div class="center layout-column flex">
<section layout="row" layout-align="left left">
<md-button class="md-primary" ng-click="vm.showDialogAdd($event)">Add new movie</md-button>
<md-button class="md-primary" ng-click="vm.showDialogDetails($event)">Add details</md-button>
</section>
<div class="simple-table-container md-whiteframe-4dp">
<div class="ms-responsive-table-wrapper">
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="movie in vm.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.country }}</td>
<td class="text-center">
<md-button class="md-warn" ng-click="vm.deleteMovie(movie)">Remove</md-button>
<md-button class="md-noink" ng-click="vm.showDetails(movie)">Details</md-button>
</td>
</tr>
<tr ng-repeat-end ng-show="movie._detailsVisible" ng-repeat="detail in vm.movieDetails">
<th>Actors: </th>
<td>
{{ detail.name }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to display "Actors:" like a title of all tds, something like that:
How can I do this?
Just move ng-repeat to td
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>Actors: </th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
I'm not sure what do you mean by display "Actors:" in one td, but you can try adding it in front of the detail name so that it will be displayed with the value in one single td.
Edit: Please try the below code to achieve your requirement.
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>
Actors:
</th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
i tried putting my form inside the foreach so that the value passed in the form is the right value for the result not the last value. but the button inside the form is not submitting (nothing happens after clicking the button).
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Receiver's Name</th>
<th>Receiver's Contact</th>
<th>Package Type</th>
<th>Date Requested</th>
</tr>
</thead>
<tbody class="list">
#foreach($result as $res)
<form role="form" method="POST" action="/search ">
<input type="hidden" name="requestID" value="{{ $res->id }}">
<tr>
<td class="name"> {{ $res->receiverLname }},
{{ $res->receiverFname }}</td>
<td class="contact"> {{ $res->receiverContact }} </td>
<td class="type"> {{ $res->packType }} </td>
<td class="date"> {{ $res->updated_at }} </td>
<td><button class="btn"> View Transaction </button></td>
</tr>
</form>
#endforeach
</tbody>
</table>
nevermind guys. i just tried putting the value in the button instead in the input hidden type and im getting the right value in the post. :D
i get rid of the input type="hidden"
and make my button this way
<button class="btn" name="requestID" value="{{ $res->id }}">