javascript - 编辑和保存不起作用

Question

我在 AngularJS 中创建了一个带有编辑、保存和取消选项的应用程序，但问题是当我单击编辑时我没有获得编辑和保存的值。

文本框和下拉菜单是通过 ng-transclude

提供的

谁能告诉我一些解决办法

DEMO

HTML

<div ng-controller="LocationFormCtrl">
    <h2>Editors</h2>
    <span ng-repeat="location in location">
    <div class="field">
        <strong>State:</strong>
        <div click-to-edit="location.state"><input ng-model="view.editableValue"/></div>
    </div>
    <div class="field">
        <strong>City:</strong>
        <div click-to-edit="location.city"><select ng-model="view.editableValue" ng-options="loc.city for loc in location"></select></div>
    </div>
    <div class="field">
        <strong>Neighbourhood:</strong>
        <div click-to-edit="location.neighbourhood"><input ng-model="view.editableValue"/></div>
    </div>
    <h2>Values</h2>
    <p><strong>State:</strong> {{location.state}}</p>
    <p><strong>City:</strong> {{location.city}}</p>
    <p><strong>Neighbourhood:</strong> {{location.neighbourhood}}</p>
    <hr>
    </span>
</div>

Answer 1

真的不知道为什么，我只是在玩弄代码，但似乎工作正常，至少在文本字段中，使用 ng-if 而不是 ng-show/ng-hide: http://jsfiddle.net/T6rA9/1/

如果我找到原因，我会更新我的答案...

更新:我想这就是您要找的:http://jsfiddle.net/T6rA9/7/

不同之处在于，我不是在保存时保存值，而是在取消时恢复更改，由于 Angular 双向数据绑定(bind)，这更容易。

因此，我还删除了 view.editableValue ng-model 指令并像往常一样使用这些字段。