英文:
I need to to auto calculate an input field on keyup function on other 2 input field which are created using Accordian
问题
Example: 在长度和宽度的键盘弹起事件上计算面积。这三个都在折叠循环内定义。
我可以创建n个<div>来获取多边形的详细信息（我们使用折叠面板来实现，因为我们需要可折叠的<div>）。我们需要在输入长度和宽度时自动计算面积，并在每个多边形的面积输入框中显示。
我尝试使用keyup函数并在每个索引上获取值。对于普通的<div>，它可以工作，但当<div>在折叠面板类中时或者在循环中时，它不起作用。
<div class="accordion">
<div class="accordion-content">
<div>
长度
<input [(ngModel)]="item.length" (keyup)="functiontocalculate($event)" />
</div>
<div>
宽度
<input [(ngModel)]="item.breadth" (keyup)="functiontocalculate($event)" />
</div>
<div>面积 <input [(ngModel)]="item.area" /></div>
</div>
</div>
英文:
Example: calculate area on keyup of length and breadth. All 3 are defined inside accordion loop.
I can create n no. <div> to fetch polygon details (which we are doing using accordion because we need collapsible div).We need to auto-calculate the area and show in the input box of area for each polygon at the time of entering l and b.
i tried using keyup function and get the value on each index. it works for normal div but doesnt work when the div is inside accordion class or(in loop)
<div class="accordion">
<div class="accordion-content">
<div>
length
<input [(ngModel)]="item.length" (keyup)="functiontocalculate($event)" />
</div>
<div>
breadth
<input [(ngModel)]="item.breadth" (keyup)="functiontocalculate($event)" />
</div>
<div>area <input [(ngModel)]="item.area" /></div>
</div>
</div>
答案1
得分: 0
To make a calculate value (if it's a simple calculus) you can use:
<input readOnly [value]="(+item.length)*(+item.breadth) || ''" />
NOTE: The "+" before is to convert to a number the value. If the result is NaN, show ''.
In this way, you needn't use anything more.
Update Well, with this way we don't store the area in "item".
Generally, in a submit function, we can do:
this.items.forEach(item=>{
item.area=(+item.length)*(+item.breadth)
})
If we don't want to do this, really we can use the function "keyup", but I prefer using ngModelChange in this way. See that you pass to the function the "item":
<input [ngModel]="item.length"
(ngModelChange)="item.length=$event;calculateArea(item)"/>
<input [ngModel]="item.breadth"
(ngModelChange)="item.breadth=$event;calculateArea(item)"/>
<input [value]="item.area" /></div>
//and in .ts
calculateArea(item:any)
{
item.area=(+item.length)*(+item.breadth) || ''
}
See that the $event in ngModelChange is the value of the input.
英文:
To make a calculate value (if it's a simple calculus) you can use
<input readOnly [value]="(+item.length)*(+item.breadth) || ''" />
NOTE: the "+" before is to convert to number the value. If the result isNaN, show ''.
In this way you neend't use nothing more.
Update Well, with this way we don't store the area in "item".
Generally in a submit function we can do
this.items.forEach(item=>{
item.area=(+item.length)*(+item.breadth)
})
If we don't want to do this, really we can use the function "keyup", but I prefer use ngModelChange in the way. See that you pass to the function the "item"
<input [ngModel]="item.length"
(ngModelChange)="item.length=$event;calculateArea(item)"/>
<input [ngModel]="item.breadth"
(ngModelChange)="item.breadth=$event;calculateArea(item)"/>
<input [value]="item.area" /></div>
//and in .ts
calculateArea(item:any)
{
item.area=(+item.length)*(+item.breadth) || ''
}
See that the $event in ngModelChange is the value of the input
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论