I try to go through a for each loop and increment value of variable to name my label with below code
<set i="0"/>
<div each="var x in Model">
<input name='field-${i}' value='${x.Id}'/>
<set i=i+1 />
</div>
but it did not increment the value of 'i' , how can I increment the value of i in above loop
thanks
The best way to do this is to use the built in indexer that Spark creates in a for loop. The above could be written like this:
<div each="var item in Model">
<input name='field-${itemIndex}' value='${item.Id}'/>
</div>
Even shorter than the original, and no need to track variables yourself. Also, no need to specifically use item, in your case it would be xIndex because x was your instance.
With slight modification:
<var i="0"/>
<div each="var x in Model">
<input name='field-${i}' value='${x.Id}'/>
<set i="i+1" />
</div>
this should work.
The initial 'set' has been changed to 'var' and quotes were added around i+1.
Related
We have an address form and would like to set a default value of x to the input phone.
<div
class="form-group ms-mb-xs"
data-ng-if="field.settings.display_type=='phone'"
>
<label>
{{field.label|msTranslate}}
</label>
<input
type="tel"
id="phone"
class="form-control"
data-ng-model="fields[field.name]"
data-ng-intl-tel-input
data-ng-init="fields[phone]=12345678"
/>
</div>
I have used data-ng-init and ng-init and tried putting a default value but it doesn't show on the front-end. Also tried value="12345678" but didn't work. Have also put the numbers in single quotes but still didn't work.
Thanks in advance.
There are two ways you can do this.
Initialize your model variable with the value you need to show.
Use ng-init to execute code so that your model variable will be given a value.
It looks that you have tried the second option data-ng-init="fields[phone]=12345678"
The only reason why the option 2 doesn't work is that the controller updates the fields[field.name] with a blank value.
So, make sure you give a default value to the model variable if the intended value is blank. Something like this:
fields[field.name] = fromDB || 'a default value'
i have a common block with ng-repeat:
<div ng-repeat="(position, task) in Tasks.plannedTasks">
{{(task.plan - (TasksTimeSpent[task.id][task.worker]).toFixed(2)}}
</div>
And now i need to set background if :
{{(task.plan - (TasksTimeSpent[task.id][task.worker]).toFixed(2)}} < 0
task.plan and task.worker can be changed and after this need to check if statement and change shown value
Is it possible to save expression result in variable (for example : curDif), display this variable and check variable inside if? I don't want calculate expression twice.
The way to calculate variable in controller is bad because variable is useless for application logic and need only for displaying but for using controller if task changes - i need to recalculate variable and use watcher for Task.
You can use ng-init for that:
<div ng-repeat="(position, task) in Tasks.plannedTasks">
<ng-init ng-init="curDif = (task.plan - (TasksTimeSpent[task.id][task.worker]).toFixed(2)">
{{curDif}}
</ng-init>
</div>
You may want to use ng-class as well to set the background.
<div ng-repeat="(position, task) in Tasks.plannedTasks">
<div ng-init="curDif = task.plan - (TasksTimeSpent[task.id][task.worker]).toFixed(2)" ng-class="'my-background':curDif < 0">
</div>
</div>
Then style your background using CSS.
I am using ng-switch and expecting that it will be a break statement after each condition. I tested with following with condtion gradeA and it display both Grade A-1 and Grade A-2. Am i missing some configuration? If not how to make ng-switch to contain break statement?
<div ng-switch="type">
<div ng-switch-when="gradeA">
Grade A-1
</div>
<div ng-switch-when="gradeA">
Grade A-2
</div>
</div>
That's because ng-switch-when works like ng-if, which means if the condition satisfies, the block would be "shown" (technically it's created instead).
According to the documentation:
ngSwitchWhen: the case statement to match against. If match then this case will be displayed. If the same match appears multiple times, all the elements will be displayed.
In your example, both cases are "case: gradeA", and thus both are shown.
If you wish to conditionally 'break out', use a nested ng-if or another nested ng-switch.
Working Plnkr
In both div, you have used ng-switch-when="gradeA". So code inside each ng-switch-when with matching value GradeA will be executed. That is why both Grade A-1 and Grade A-2 are displayed.
Your code should look like:
<div ng-switch="type">
<div ng-switch-when="gradeA-1">
Grade A-1
</div>
<div ng-switch-when="gradeA-2">
Grade A-2
</div>
</div>
Notice that in above code, first ng-switch-when with matching value gradeA-1 and second ng-switch-when with matching value gradeA-2. So there is no chance to be displayed both data.
Hope that solve your problem.
Update: Performance Issue from this answer
One solution I used was to use ng-show/ng-hide. These directives do
not modify the DOM structure, but instead use CSS to hide/show the
elements. It can be faster, but beware that the DOM could become very
large if you fall into the trap of trying to contain all of
templates/DOM elements of your web site in memory at the same time in
this manner.
OP of that question also answered with a solution.
I'm attempting to use Angular directives to create custom input field types. For example, I have a type called "duration" which draws three separate hours, minutes, and seconds fields. I'm trying to use the directive as an attribute of an input element, and the directive replaces the input element.
For example, in the following code:
<input duration>
Would be rendered as a <div> with several inputs inside of it, and the original input would be out of the picture.
I'm running an ngRepeat loop through several form fields of different types, including duration. I'd like to find a way that only requires me to put one input in the HTML, with the duration attribute applied only if the field is supposed to be of duration type. I tried the following:
<div ng-repeat="field in fields">
<input type='{{field}}' ng-attr-duration="field==='duration'">
</div>
The problem with that code is that every element is rendered as duration because ng-attr-duration gets evaluated to duration='false' when the field is not duration, which triggers my directive.
Is there a way for me to apply the directive conditionally without having to define multiple <input>s to reduce redundancy in my code?
Take a look at what the directive docs say about ng-attr:
When using ngAttr, the allOrNothing flag of $interpolate is used, so if any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.
Note that you need to be using curly braces so Angular will interpolate the expression. And, if your expression has an undefined term in it, the attribute won't be added.
How about something like this:
<div ng-repeat="field in fields">
<input type='{{field}}' ng-attr-duration="{{field==='duration' ? true : undefined}}">
</div>
The true in the ternary expression can be whatever you want, just not undefined.
What i can think of you can use condition if-else of ng-switch
<div ng-repeat="field in fields">
<div ng-switch on="field">
<input ng-switch-when="true" type='{{field}}' ng-attr-duration="field==='duration'">
<input ng-switch-default="true" type='{{field}}'>
</div>
</div>
It will also maintain readability of code.
I am trying to get number of rows from the text that gets inject into text area, for some reason I can't get textarea to initalize number of row, here's my code. What am I doing wrong?
<div class="form-group col-sm-12">
<textarea contenteditable="true"
rows="'iwofRecord.WhatHasBeenDone.split('\n').lenght'"
class="form-control form-control-plain"
ng-model="iwofRecord.WhatHasBeenDone"
placeholder="What Has Been Done">
</textarea>
</div>
rows is not an Angular attribute, wrap that in {{}} - you're also double quoting that attribute (and have length spelled wrong)
rows="{{iwofRecord.WhatHasBeenDone.split('\n').length}}"
.lengHT - there is a typo, it has to be .length