如何在angularJS中使用ngModel保留初始值

时间:2017-05-25 17:21:26

标签: javascript angularjs

我正在尝试为在线编辑添加功能。

这是我的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的范围内检索它。或者以我所描述的方式启用取消按钮的任何其他工作?感谢。

1 个答案:

答案 0 :(得分:3)

Angular 中,使用指令 ngModelOptions 更改提交事件<上的 ng-model 值/ strong>并使用 $ 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了解更多信息