Question

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

文本字段和下拉列表是通过ng-transclude

提供的

任何人都可以告诉我一些解决方案吗

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/

不同之处在于，我没有在保存时保存值，而是在还原时恢复更改，由于角度双向数据绑定，这更容易。

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

Answer 2

划分和隔离范围不会像您想象的那样发挥作用。您可以在http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

了解更多相关信息

如果您进行此更改，您将看到差异

<div click-to-edit="location.state"><input ng-model="location.state"/></div>

Answer 3

如何创建ngClick函数，在div中添加以前值的输入元素？

<div class="newInput" ng-show="hidden">
   <label> {{ inputValue }} </label>
</div>

<div class="newInput" ng-show="!hidden">
  <input ng-model="inputValue" />
</div>

和main.js文件：

app.controller('MyCtrl', function($scope) {

  $scope.hidden = true;

  $scope.inputValue = 'Edit me!';

  $scope.addInput = function() {
    $scope.hidden = !$scope.hidden;
  }

});

这里有Plunker

编辑和保存无效

3 个答案: