I have a problem in angular i dont now how to call from the table to an object that has many to many relationship
[
{
"id": 2,
"username": "test",
"email": "test1#gmail.com",
"groups": [
{
"id": 2,
"name": "Empleados",
"permissions": []
}
]
},
]
<tr *ngFor="let item of users;">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.groups.name}}</td>
<td>
Leer
Editar
<button class="delete" (click)="Eliminar(item)">Eliminar</button>
</td>
</tr>
that does not work for me, it only works for me when the relationship is one to many
try to do this, I only work the first column
{{item.groups[0].name}}
You can nest *ngFor statements by iterating over e.g. an array property of in your case the item variable:
<tr *ngFor="let item of users;">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.groups.name}}</td>
<td>...</td>
<!-- e.g. here do: -->
<td>
<table border="0">
<tr *ngFor="let group of item.groups>
<td>{{ group.name }}</td>
</tr>
</table>
</td>
</tr>
Related
The intention of the following code is to display a row if unique identifier of the row above is within the rows array. Why does Svelte update the view only after several clicks, in a seemingly random way?
<script>
import { onMount } from "svelte";
let rows = [
{"name": "Alex", "id": "0"},
{"name": "Steve", "id": "1"},
{"name": "Mike", "id": "2"},
];
let expandedRows = [];
function toggleExpandRows(row_id_to_toggle) {
console.log("Row to toggle:", row_id_to_toggle)
console.log(expandedRows);
if (expandedRows.includes(row_id_to_toggle)) {
console.log(expandedRows, "includes", row_id_to_toggle)
expandedRows = expandedRows.filter(expanded_row_id => expanded_row_id !== row_id_to_toggle)
} else {
expandedRows.push(row_id_to_toggle);
}
}
</script>
<div class="overflow-x-auto w-full">
<table class="table table-compact w-full">
<thead>
<tr>
<th></th>
<th>Name</th>
</tr>
</thead>
<tbody>
{#each rows as row (row.id)}
<tr>
<td>
<button class="btn btn-xs" on:click={()=>toggleExpandRows(row.id)}>+/-</button>
</td>
<td class="min-w-[3rem] ">{row.name}</td>
</tr>
row.id: {JSON.stringify(row.id)}
{#if expandedRows.includes(row.id)}
<tr>
<td colspan="2">-</td>
</tr>
{/if}
{/each}
</tbody>
</table>
Expanded: {JSON.stringify(expandedRows)}
</div>
REPL
Reactivity is based on assignments, which is why for arrays you also often see this pattern instead of push:
array = [...array, item];
Instead of just expandedRows.push(row_id_to_toggle), you should also assign expandedRows, so Svelte will know it has changed.
You can try:
.
.
.
else {
expandedRows.push(row_id_to_toggle);
expandedRows = expandedRows
}
I need help!
I have an ASP.NET Core 5 MVC Webapplication. I have a list with items from a .mdf-database and want a checkbox at the end of each item-row. When I am in the controller of this view, I want to have the ID of the item, which is checked. There could be more than one checked. But I don't know how to to this.
Below some snippets from my code:
Index.cshtml
<form asp-action="Send">
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Id)
</th>
<th>
#Html.DisplayNameFor(model => model.Bez)
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.Bez)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
<td>
#Html.CheckBox("Finalized", false)
</td>
</tr>
}
</tbody>
</table>
<input type="submit" value="Send" class="btn btn-primary" />
<br /><br />
<p>Achtung! Beim Senden an einem Freitag wird der Dienstplan automatisch für den darauffolgenden Montag eingeteilt.</p>
</form>
Can someone help me? I just want the id's in a list in my controller, which are checked.
It seems you want to post the selected Ids to backend. Here is a working demo you could follow:
#Html.CheckBox("Finalized", false,new { #value=item.Id})
Controller:
[HttpPost]
//if the type of item.Id is int, it will receive int array in backend
public IActionResult Send(int[] Finalized)
{
//do your stuff...
}
Im trying to make a typo3 extension and i want to show all relations(in this case cities) from region. I connected them in them in the kickstarter like this:
i tried to print the cities in the regions single view doing this:
<table class="tx-collection-plan" >
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.name" />
</td>
<td>
{region.name}
</td>
</tr>
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.cities" />
</td>
<td>
<ul>
<f:for each="{region.cities)" as="city">
<li>{city.name}</li>
</f:for>
</ul>
</td>
</tr>
</table>
But i keep getting this error:
Oops, an error occurred!
The argument "each" was registered with type "array", but is of type "string" in view helper "TYPO3\CMS\Fluid\ViewHelpers\ForViewHelper"
is there another solution to show all subparts of a region (with links that can be klicked -> like the list view of cities itself)?
EDIT: when i remove the for loop and just print city.name, i only get
the dot from li .... but nothing else
I found the solution:
all i need is
<table class="tx-collection-plan" >
<tr>
<td>
<f:translate key="tx_collectionplan_domain_model_region.name" />
</td>
<td>
{region.name}
</td>
<td>
<f:for each="{region.cities}" as="city">
{city.name}
</f:for>
</td>
</tr>
</table>
the <f:translate> was unnecessary
I have a list of checkboxes in my template:
<table>
<thead>
<tr>
<th></th>
<th>Sender</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{{#each message in model.entities}}
<tr>
<td class="cell-star">
{{input type="checkbox" name=message.id tabindex=message.id class="starBox" checked=message.isStar }}
</td>
<td class="cell-broadcaster">
{{message.notification.autor.firstName}} {{message.notification.autor.lastName}}
</td>
<td class="cell-title">
{{#link-to 'notifications.details' message.notification.id}}{{message.notification.title}}{{/link-to}} {{#unless message.isRead}} (new) {{/unless}}
</td>
</tr>
{{/each}}
</tbody>
</table>
And now i want to send rest query every time when i change some of the checkbox state with id of changed checkbox.
What should i write in my controller?
i have tried something like that but i cannot get data of changed checkbox:
updateStarStatus: function() {
console.log('checkbox clicked');
//here should be something like that:
//$.getJSON(apiHost + "/api/forum/star/"+id);
}.observes('model.entities.#each.isStar'),
im not using emberData. My model looks like this:
model: function() {
return $.getJSON(apiHost + "/api/forum");
},
You could use the observesBefore method to track the changes and make a diff in the observes method, but I'd rather use the native on change event, to trigger an action and pass the object:
<div {{action "updateStarStatus" message on="change"}}>
{{input type="checkbox" checked=message.isStar}}
and in the controller
actions: {
updateStarStatus: function(message) {
alert(message.id)
}
}
http://emberjs.jsbin.com/zohaqodese/2/
Hi I would like to know if it was possible to use a more complex array for the collectionView.
Because for now I'm only using it like this :
App.GroupList = Ember.ArrayController.create({
content: ['A','B','C','D'],
})
App.GroupListView = Ember.CollectionView.extend({
tagName: 'tbody',
contentBinding: "App.GroupList"
})
And display them like this :
<table class="table-history">
{{#collection App.GroupListView}}
<td class="col-left">
{{view.content}}
</td>
<td>
<span class="col-number-contact">0</td>
</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="ed-img"></div>
</td>
{{/collection}}
</table>
So far, so good, its working well, but I would like to add more information inside the content like this :
content: [
['A','1'],
['B','2'],
['C','3'],
]
And display the number in a second <td> tad (the one with the 0 inside).
But its not working.. and I wouldn't even know how to display them in my template.
Someone already managed to passe a complex collection content ?
You can use an array of objects instead like this:
App.GroupList = Ember.ArrayController.create({
content: [{'id':1,val:'A'},{'id':2,val:'B'},{'id':3,val:'C'},{'id':4,val:'D'}];
});
Then in your template, you can access it like this:
<table class="table-history">
{{#collection App.GroupListView}}
<td class="col-left">
{{view.content.val}}
</td>
<td>
<span class="col-number-contact">{{view.content.id}}</td>
</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="ed-img"></div>
</td>
{{/collection}}
</table>