保留文本框的旧值 [英] Retain old value of textbox

问题描述

我在页面中编辑，查看，取消功能。



查看



我有重复。在ng-repeat内部，我创建了span，其值来自db。



编辑

编辑功能，我在文本框中显示这些跨度值（输入类型文本）。



现在用户编辑了一个文本框，

编辑完成后，用户将点击保存，将其保存在数据库中。



怀疑：

如果用户点击取消，我需要保留所有已编辑的文本框的旧值。



我尝试使用angular.copy来保留原始数组。然后如果它被取消将用复制的数组替换模型。但是这种方法会影响性能，如果我有这么多单元格，如果只编辑一个单元格则不需要为所有单元格进行角度复制。



i尝试使用ng-change.and我能够获得旧值，但我不想使用ng-change，因为它每次都会被调用，因为我需要获取旧值一次。



所以我想到了ng-focus。因此，一旦文本框被聚焦，将复制数组中的旧值。然后用户编辑文本框。但是如果我们移动到其他文本框并再次返回到上一个文本框，我不想再次调用焦点，因为我已经为该文本框设置了旧值。



那么有没有办法限制焦点功能（javascript函数）一次。



或者我可以使用其他方法吗？

Hi,

I have edit,view,cancel functionality in a page.

view

I have a ng repeat. Inside ng-repeat i am creating span whose value comes from db.

Edit
on edit functionality, I show those span values in textbox(input type text).

Now user edits a textbox,
Once the editing is done, user will click on save,to save it in db.

Doubt:
If user clicks cancel, i need to retain the old value of all the edited textboxes that has come for db.

I tried with angular.copy to keep the original array. then if it is cancelled will replace the model back with the copied array. But this approach impacts performance if i have so many cells, if only one cell is edited no need to do angular copy for all.

i tried with ng-change.and i am able to get the old values, but I don't want to use ng-change as it will be called everytime as i need to get the old value once.

So I thought of ng-focus. So once the textbox is focussed, will copy the old value in an array. Then user edits the text box. But if we move to other textbox and come back again to previous textbox I don't want to call the focus again as i have already the old value for that textbox.

So is there any way to restrict focus function(javascript function) once.

Or is there any other approach which I can use?

推荐答案

它不会显着影响性能，如果你做对了原因应该很明显。让我们说，用户进入一些编辑会话，通过提交更改或一起取消它们来结束。但是，用户无法在一个会话中对这么多文本值进行物理编辑，而将其恢复为原始值可能会花费任何明显的时间。



但当然你如果你以一种愚蠢的方式做到这一点，仍会遇到麻烦;例如，如果保留可供修改的所有数据的副本;如果这种控制的数量很大（然而这本身就是应用程序设计有问题的标志），并且如果保留所有这些控件的值，我可以想象它将花费太多时间，还有系统内存。



但如果您有选择地保留数据，这将不会成为问题。怎么样？以一种非常简单的方式：在每个控件上，处理更改事件：https://developer.mozilla.org/en-US/docs/Web/Events/change [ ^ ]。



如果在一些输入控件，其值可能会改变。 （我说可能，因为你可能会说，编辑一些文本，然后手动将其恢复到与编辑前相同的值;但让我们将这种控制视为已修改，并且有一些冗余。）如果不是，那么没有必要保留价值。所以，你有一些代表变更集的集合对象。当您在某个控件上捕获更改事件时，首先将对控件及其当前值的引用添加到更改集对象，每个值都带有其唯一键，例如控件 id 。在会话结束时，您将需要恢复取消上的值。现在，请记住，JavaScript对象提供O（1）的时间复杂度，用于按键搜索对象。我测试JavaScript性能的最大对象是包含65513个条目的字典;如果用钥匙搜索的速度很快，那么人们就不会注意到延迟。您将遍历更改集对象的所有关键属性，通过键获取对象引用，并按值获取值并将其还原。这将花费时间。



这里有几个问题：1）事件不会立即被调用;特别是你需要将键盘焦点移出它，2）当输入新值时处理事件，因此，基本上你放松了原始值。第一个并不是真正的问题，因为在使用更改的值之前，您只需要此功能。通过对所有控件使用阴影值可以解决这两个问题。比如，您可以为每个控件添加一个新属性 shadowValue ，并在每次更改时从真实值属性更新它。这样，您将在 shadowValue 中存储previous值。



这是基本的JavaScript功能;你不需要任何库。



现在，替代方法是使用数据库的事务性功能。启动事务，使用数据绑定控件更改数据库数据，更改基于UI状态以任何其他方式修改它，以及取消回滚。

-SA

It cannot impact performance significantly, if you do it right. The reason should be pretty obviously. Let's say, the user goes into some "editing session" which is ended by either committing changes, or cancelling them all together. But the user cannot physically edit so many text values in one session to that extend where the reverting them to the original values can take any noticeable time.

But of course you still get into trouble if you do it in some silly way; for example, if you preserve the copy of all data which is accessible for modification; if the number of such control is huge (which however itself would be a sign of questionable application design), and if you preserve the values of all of them, I can imagine that it would take too much time, and also the system memory.

But it won't be ever a problem if you preserve the data selectively. How? In a pretty simple way: on each control, handle the change event: https://developer.mozilla.org/en-US/docs/Web/Events/change[^].

If the event is invoked in some input control, its value might be changed. (I say "might" because it's possible that you, say edit some text and then restore it manually to the same value as before editing; but let's consider such control as "modified", too, with some redundancy.) If not, there is no need to preserve the value. So, you have some collection object representing the "change set". When you capture the change event on some control, first add the reference to the control and its current value to the change set object, each value coming with its unique key, such as the control id. At the end of the session, you will need to restore the values on Cancel. Now, remember that JavaScript objects provide time complexity of O(1) for search of the object by key. The biggest object I testes the JavaScript performance with was the dictionary with 65513 entries; and the performance if the search by the key was blazing fast, the delay cannot even be noticed by a human. You will traverse through all the key properties of the change set object, get the object reference by the key and value by the value and restore it. It will take no time.

There are couple of problems here: 1) the event is not invoked immediately; you need, in particular, move the keyboard focus out of it, 2) the event is handled when new value is already entered, so, essentially, you loose original value. First one is not really a problem, because you only need this functionality before you use the changed value. Both problems can be solved by using shadow values for all controls. Say, you can add a new property shadowValue to each control and update it from "real" value property on each change. This way, you will have the "previous" value stored in shadowValue.

And this is the basic JavaScript functionality; you don't need any libraries.

Now, alternative approach is to use transactional feature of the database. Start transaction, use the data-bound control to change the database data, of change modify it based on UI states in any other way, and on Cancel roll back.

—SA

将原始值放在JSON对象中怎么样？如果用户取消更新，则可以从JSON对象恢复值。

What about putting the original values in a JSON object. If the user cancels the update, the values can be restored from the JSON object.

这篇关于保留文本框的旧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！