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瞭解更多信息