Question

我正在尝试为行编辑添加一个功能。

这里是我的html：

<div class="value" data-ng-repeat='value in aaVM.archValues'> 
    <div class="nameContainer"> 
     <div class='name' data-ng-hide='editing' data-ng-click='editing = !editing'> 
     <span>{{value.name}}</span> 
     <div class="icon"> 
      <md-icon class="mdIcon" md-svg-src="./resources/images/icons/edit.svg"></md-icon> 
     </div> 
     </div> 
     <form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'> 
     <input type="text" data-ng-model='value.name'> 
     <div class="cancel" data-ng-click='editing = !editing'>X</div> 
     <input type="submit"> 
     </form> 
    </div> 
    </div> 

一切正常。这是问题所在，因为我使用ng-model来绑定表单中的值名称。当我点击取消时，ui会显示编辑后的输入版本（假设进行了编辑），尽管按下了取消按钮。

我希望用户能够自由编辑，当点击取消按钮时，它将该值恢复为原始值value.name。

我可以使用一个不同的变量，但我希望输入的初始值是来自ng-repeat的值。有没有办法暂时克隆该值，并在稍后的ng-repeat范围内检索该值。还是其他解决方法，以我所描述的方式启用取消按钮？谢谢。

Answer 1

在角，使用指令ngModelOptions来改变NG-模式值提交事件和使用$ rollbackViewValue回滚输入原始值

试试这个：

<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'> 
    <input type="text" ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'> 
    <div class="cancel" data-ng-click="editing = !editing; value.name.$rollbackViewValue();">X</div> 
    <input type="submit"> 
</form> 

Official Documentation了解更多信息