<div class="kalender">
<table *ngIf="datoer">
<tr>
<td *ngFor="let cell of ukeEn()"
[attr.title]="cell.id">{{cell.text}}</td>
</div>
</tr>
</table>
</div>
I would like to check if attr.title (or cell.id) == any of the element's .dato attribute (an element is a type element called Cell, with the attribute dato) in an array called datoer, which is defined in my component. So I need to check the attr.title up against every value in the datoer array. Then I want to add an element (for ex. div or p) in the td if this condition is true.
Is this possible?
If you need more code samle to understand my problem, just ask.
<div class="kalender">
<table *ngIf="datoer">
<tr>
<td *ngFor="let cell of ukeEn()" [attr.title]="cell.id">
<div *ngIf="datoerContains(cell)">{{cell.text}}</div>
</td>
</tr>
</table>
</div>
In your component put this:
datoerContains(cell:any):boolean {
for(let i = 0; i < this.datoer.length; i++) {
if (this.datoer[i].dato == cell.dato) {
return true;
}
}
return false;
}
Related
I'm trying to build a dynamic table in Angular with add, edit, delete functionality. Both my edit/delete buttons exist as their own column on every single one of the table rows. The edit button (onclick) is designed to make each of the 3 text data fields (in the same row as the edit button itself) turn into input fields whose user-entered text can then be saved.
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Description</th>
<th>API Key</th>
<th>EDIT/DELETE</th>
</tr>
<tr id="newtablerow" ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td id="tablevalues" *ngFor="let col of columns">
<span id="columnText" ng-init="getRowIndex(i)" *ngIf="!editing">{{prov[col]}}</span>
<span class="editfield" *ngIf="editing">
<input id="changeText" ng-init="getChangeTextCol(col)" type="text" style="margin-right: 10px" placeholder="{{prov[col]}}">
<button ngOnload="getChangeTextCol(col)" (click)="save(changeText.value); !editing">Save</button>
</span>
</td>
<td id="editdelete">
<button class="edit" name="editButton" (click)="editToggle(i)">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</td>
</tr>
public editing: boolean = false;
editToggle(event) {
var table = (<HTMLTableElement>document.getElementById("thetable"));
var getTextFields = table.getElementsByClassName("columnText");
for (var i = 0; i < getTextFields.length; i++) {
if (getTextFields[i].getRowIndex(event) == event) {
getTextFields[i].editing = !getTextFields[i].editing;
}
}
}
getRowIndex(event) {
console.log("row index = " + event);
return event;
}
getChangeTextCol(event) {
return event;
}
deleteRow(event) {
this.providers.splice(event, 1);
}
editToggle() is activated on edit button click and finds the current row index of itself by variable i specified by *ngFor. However, I also need to tell angular the row index of the span element containing the html input field to be shown, but I get an error saying property 'getRowIndex' does not exist on type 'Element'. This works for other functions in HTML elements like deleteRow(i), for instance.
I have a basic html table where i need to have all the rows initially highlighted when the table is created. Also, if the user clicks the row it un highlights and clicked again highlights.
I have the click on a row, and it highlights. If you click again it un highlights.
I just need to initially highlight all rows possibly by ng-repeat. It also needs to release the highlighting when the row is clicked again and then highlight back. userData is just a line of text for each row
HTML
<table class="superusertable" cellpadding="5" cellspacing="0">
<tbody class="table-font">
<tr ng-init="" ng-repeat="source in userData"
ng-model="source.fromSourceID"
ng-class="{'sourcesSelected': source.sourcesSelected}"
ng-click="select(source)">
<td width="290px">
<div class="action-checkbox"; width="290px">{{source.fromSourceID}}
</div>
</td>
</tr>
</tbody>
</table>
angular
$scope.select = function(item) {
item.sourcesSelected ? item.sourcesSelected = false : item.sourcesSelected = true;
};
You can just add a function to the ng-init attribute on your tr. Just pass in your item and set it to true. Then like Aluan said in a comment, you can just make your ng-click function simpler by doing item.sourcesSelected = !item.sourcesSelected.
html
<table class="superusertable" cellpadding="5" cellspacing="0">
<tbody class="table-font">
<tr ng-init="init(source)"
ng-repeat="source in userData"
ng-model="source.fromSourceID"
ng-class="{'sourcesSelected': source.sourcesSelected}"
ng-click="select(source)">
<td width="290px">
<div class="action-checkbox"; width="290px">{{source.fromSourceID}}</div>
</td>
</tr>
</tbody>
</table>
angular
$scope.select = function(item) {
item.sourcesSelected = !item.sourcesSelected;
};
$scope.init = function(item) {
item.sourcesSelected = true;
}
On a side note, you can completely eliminate the ng-init and init function by setting item.sourcesSelected = true when you are retrieving your data.
There are too many errors i can observe.
ng-init="" not required
ternary operator is wrong you should do something following:
item.sourcesSelected = item.sourcesSelected ? false : true;
I am using ASP.NET MVC4. I am curious, is there a way to conditionally add/change html code that is higher up in the file than where the conditional statement is?
I am using a partial, and I want to add a button at the top of page to hide and unhide a row that contains M. only if this certain condition code exists in the table. I tried using RendorSection but apparently that doesn't work in a partial.
Currently, I hide the button based on the model being empty or null. The model is just a list. But I want to take it further and hide the button conditionally on if the value M exists but, the conditional statement will be further down the page, than where the button needs to be in the markup.
This is my code:
<div class="container TransactionTableResult" style="padding-top:3px">
#if (Model != null && Model.Count > 0)
{
<button type="button" id="MoveToggle" class="btn btn-info" data-toggle="button" title="Click to toggle display of move transactions.">Moves</button>
}
#if (Model != null && Model.Count > 0)
{
<table id="LogTable" class="table table-striped table-condensed">
<thead>
<tr>
#foreach (System.ComponentModel.PropertyDescriptor descriptor in System.ComponentModel.TypeDescriptor.GetProperties(Model[0]))
{
<th>#descriptor.Name</th>
}
</tr>
</thead>
<tbody>
#foreach (Dashboard.Areas.Transact_Part.BusinessLayer.Models.Transaction trans in Model)
{
string hide = trans.TRANS.Equals("M") ? "display:none" : "";
<tr style="white-space:nowrap; #hide">
#foreach (System.ComponentModel.PropertyDescriptor descriptor in System.ComponentModel.TypeDescriptor.GetProperties(trans))
{
<td>
#descriptor.GetValue(trans)
</td>
}
</tr>
}
</tbody>
</table>
Basically I am creating a data grid that displays data from different tables in database.I am using ASP.NET MVC4 for this.
Following is how my part of my code looks:
<table class="myTable">
<tbody>
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
#* Here my logic would go*#
</td>
</tr>
}
So after displaying the rows of name of sets,in the next column I would want to display the elements that belong to that set.So I wrote another for loop in <td></td> that would loop through the Model.elements and check if it belongs to that set and display it.But I am getting "Element td cannot be nested within element td " validation error.
So how can I add data into rows of the next column?
Put your logic below the first end td tags instead. You can't put td tags inside other td tags; a series of sibling td tags make up a row.
If you want each separate piece of data in its own column:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
#foreach (var element in Model.elements)
{
<td>
#*logic here*#
</td>
}
</tr>
If you want all your content inside the same cell, then you want:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
<td>
#foreach (var element in Model.elements)
{
#*logic here*#
}
</td>
</tr>
}
Hi can somebody tell me if it is possible to set the visibility of a basic html element by using a property of the particular row item of the table it is contained within?
Here's some basic psuedo code to give yout some idea of what I'm trying to do.
foreach (var item in group) {
<tr>
<td>
<span if(item.IsApprovedToSayHi) then style="display:none">Hi</span>
foreach (var item in group) {
var displayStyle = item.IsApprovedToSayHi?'display:none':'display:inline';
'<tr>
<td>
<span then style='+displayStyle+'>Hi</span>'
This is how I prefer to do it -- or put a class on it and do it on page load (which may be annoying in some cases).
foreach (var item in group) {
<tr>
<td>
<span <%: (item.IsApprovedToSayHi) ? " style=\"display: none;\" : string.Empty %>>Hi</span>
If you're using the Razor view engine, try this:
foreach (var item in group) {
<tr>
<td>
<span #( item.IsApprovedToSayHi ? " style=\"display: none;\" : string.Empty )>Hi</span>
#foreach (var item in group) {
<tr>
<td>
#if(item.IsApprovedToSayHi) {
<span style="display:none">
} else {
<span>
}
Hi</span>