我正在尝试添加行内编辑功能。
这是我的 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
范围内检索它.或者任何其他解决方法可以按照我描述的方式启用取消按钮?谢谢。
在 Angular 中,使用指令ngModelOptions 更改提交事件上的 ng-model 值,并使用 $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>
官方文档以获取更多信息