I'm trying to change the text inside a <'span> generated dynamically.
The <'span> is generated inside a list (<'ul><'li>) that change its number of item (li) if a selection was changed.
this is the dynamic list (it works)
<ul *ngIf="placeholder[0]">
<li *ngFor="let time of placeholder[0], let i = index" >
<div><span id="timer0{{i}}"> lol </span><span *ngIf="timer[0].timeLeft[i] > 0"> : {{timer[0].timeLeft[i]}} secondi <button (click)="restart(0, i)"> reset qua</button><button (click)="check()"> check div</button></span></div>
</li>
</ul>
This is the Typescript code in which i'm trying to change the text inside the <span id = "timer0{{i}}">
setTime(i: number){
//setting del timer (azzero tutti i campi)
this.placeholder[i]=[]
this.timer[i].lunghezza = Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]]).length;
for (let j = 0; j < this.timer[i].lunghezza; j++) {
this.placeholder[i][j] = [""]
}
for (let j = 0; j < this.timer[i].lunghezza; j++) {
this.pauseTimer(i, j);
this.timer[i].inizio[j] = 0;
this.timer[i].fine[j] = Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]][j]).length;
this.timer[i].timeLeft[j] = <number> <unknown>Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]][j][0])[this.timer[i].inizio[j]];
}
console.log("check: ",document.getElementById('timer01'))
}
console.log("check: ",document.getElementById('timer01')) gives me = null inside the function, but if i call a function (after pressing the check button) that print it, it gives me the correct value ("lol")...
what i'm doing wrong?
Related
I have this div that I need to take the text value from to use in my doubleClicks function. Since ngmodel does not work on div, I tried to use the solution on this link (ngModel is not working on <div> tag using contenteditable and have html as an input)
I get the error "object is possibly null" when using "event.target.textContent".
After the list is loaded I need to be able to update any value from the list, but for that, I need the input text from the user in the div id=newProjectName to pass to the backend service.
<li
*ngFor="let i of listing; let idx = index; let isLast = last"
class="company"
(click)="selectedLine($event, idx)"
(dblclick)="doubleClicks($event, idx)"
[ngClass]="{ selected: idx == selectedItem }"
[ngClass]="{ lastAdded: isLast && isProjects && newProjectEntry }"
id="listing"
>
<div
*ngIf="!isProjects"
class="name"
id="newProjectName"
name="newProjectName"
[innerHTML]="content"
(input)="contentNew = $event.target.textContent"
>
{{ i.name }}
</div>
</li>
doubleClicks(event, idx) {
if (this.isProjects) {
// USE DIV (Id=newProjectName) TEXT VALUE HERE
name = ....
}
}
<div class="outer" *ngFor="let place of hallPlace; let i = index">
<div [ngClass]="{'seat-reserve' : selectedIndex === (j*i)+j}" class="inner" *ngFor="let spot of place; let j = index" (click)="setPlace((j*i)+j)">
<span class="content">{{spot}}</span>
</div>
</div>
setPlace(seat) {
this.selectedIndex = seat;
}
I have two dimensional array and I want to add class to selected item, now when I click first element add me style to 1 column, and also when i click random element add me style to few elements. How to add style only one element? And It is possible use array of selectedIndex?
The problem is that indexes count starts with 0, and if you multiply by 0 you get 0
So try ((j+1) * (i+1)) + j + 1 instead of (j*i)+j
I want to achieve something like this:
<li>Item1
<ul>
<li>Item2</li>
<li>
Item3
<ul>
<li>
Item4
<ul>
<li>
Item5
<ul>
<li>
Item6
<ul>
<li> Item7 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> Item8 </li>
</ul>
</li>
Item 1 etc are pulled from a dictionary which can change based on user input. Below is what I tried with my MVC app in the view:
#foreach (var stp in Model.stepData)
{
<li>#stp.Key</li>
<ul>
#for (int i = 0; i < stp.Value.Count; i++)
{
<li>#stp.Value[i]</li>
}
</ul>
}
I know I want to add < ul > before the < li > in the #stp.Value loop.. but that needs to be open.. the closing tags need to be after the last one in that iteration is written. So I thought that maybe another for loop to enter the tag.. but that doesn't work at all. Is it possible for me to achieve this in html?
code of what I tried:
#for (int i = 0; i < stp.Value.Count; i++)
{
<ul><li>#stp.Value[i]</li>
}
#for(int i = 0; i<stp.Value.Count;i++){</ul>}
TIA for your help.
Tried the answer below but got it was unable to find the listItems in the current context within the loop and it also complained of too many characters in the character literal when #for was used.
The target framework is .Net Core 2.0; MVC 5
This should loop through stp.Value and returned each item wrapped in li tags rendered within your parent ul tag:
<ul id="myList">
// stp.Value items here
</ul>
<script>
var list = docment.getElementById('myList');
var listItem = '';
#for (int i = 0; i < stp.Value.Count; i++){
listItem += '<li>' + #stp.Value[i] + '</li>'
}
list.innerHTML = listItem;
</script>
Most MVC frameworks have their own approach to this but since you didn't specify which framework you are using, the above is a general approach to it using vanilla JS.
Made slight modification to the answer above so that it works with razor loop
:
`
<script>
var list = document.getElementById('valueList');
var listItem = '';
var count = 0;
#for (int i = 0; i<stp.Value.Count; i++) {
<text>
listItem += '<ul><li>' + '#stp.Value[i]' + ''
count = i;
</text>
}
for (var i = 0; i <=count; i++) {
listItem += '</li></ul>'
}
list.innerHTML = listItem;
</script>
`
I want to display 3 Cells in a row and then create row <tr> dynamically for remaining cells. When I searched for this logic, I am getting same answer from multiple articles about using modulo and it seems working for evryone but I'm not getting desired output. What am I missing here?
Code:
<table>
#for (var i = 0; i < deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList.Count; i++)
{
var deliveryTag = deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList[i];
if ((i%3) == 0) //Create new row for 4th item
{
#:<tr>
}
<td>
<div class="input-element checkbox">
#Html.CheckBoxFor(x => x.DeliveryProviderList[j].DeliveryTagInfo.IsDeliveryTagSelectedList[i], new
{
name = deliveryTag,
id = deliveryTag
})
<label for="#deliveryTag">
<span></span>#deliveryTag</label>
</div>
</td>
if ((i%3) == 0)
{
#:</tr>
}
}
</table>
Output:
Expected Output:
Test1
ALCOHOL SPILLABLE COLD_BAG
HOT_BAG HEAVY SIZE
Test2
abc pqr xyz
Some of the problem code is in your closing tag.
if ((i%3) == 0)
{
#:</tr>
}
On your first iteration, i%3 is == 0, so you put a closing tag on your first statement. Essentially you are only creating <tr> tags on every third one.
Here is an example of how you could remedy this:
var listCount = 11;
for (var i = 0; i < listCount; i++)
{
if (i%3 == 0)
{
#:<tr>
}
//Add Checkboxes
//Closing Tag
if (((i+1) % 3 == 0 )|| i == listCount - 1)
{
#:</tr>
}
}
Closing tag Explained...
For the first condition of the closing tag:
(i+1) % 3 == 0 )
Since the item has been added, we check to see if it is the third one- by using i+1, we will know how many items
are in the row and we can close it if it is.
For the second condition:
i == listCount - 1
We also need to account for if it is the last item. If the list only has 2 items for example, we still need to close the row.
How do I align add this text properly?
my code :
data[0]=hello 123
data[1]=hellowq 345
data[2]=heloowaaa 678
for (var i = 0; i < data.length; i++) {
obj += "<pre><li>" + data[i] + "</li></pre>";
}
my actual input :
hello 123
hellowq 345
heloowaaa 678
output :
hello 123
hellowq 345
heloowaaa 678
I would like to get output like this:
hello 123
hellowq 345
heloowaaa 678
You have invalid HTML, the only valid child of either a <ul> or <ol> is an <li> element; the <pre> elements should be within the <li> elements:
for (var j = 0; j < data.length; j++) {
obj += "<li><pre>" + data[i] + "</pre></li>";
}
And the CSS for the <pre> elements set to white-space: pre-wrap (or similar), this is the usual default styling of that element, but it's possible that the defaults have been overwritten or set differently in your browser.
As I claimed in the comments, you probably add the same amount of spaces to each label/value-pair. The solution is probably in the code we don't see where you would have to subtract the length of your label+value from the number of whitespaces generated.
A better way to do this would be to layout in html/css instead. A quick and dirty example.
HTML
<ul>
<li>Domdido <span class="value">$8</span></li>
<li>Domdido123 <span class="value">$8</span></li>
</ul>
CSS:
ul{list-style:none;padding-left:0;
width:50%;
}
.value{float:right;}
http://jsfiddle.net/tqs2rvrd/