Question

我发布了我的代码。我可以编辑值并保存。在文本区域中编辑值并单击取消按钮时，已取消的文本也会保存并取消不起作用。请为此方案提供解决方案。谢谢

＆＃13;

// functions in the controller 
edit: function (value) {
  $scope.showEdit=true;
  $scope[value]=true;
  $scope.editText=angular.copy($scope.Contents);
}

,
cancel: function (value) {
  $scope[value]=false;
}

,
save: function () {
  var contentObj= {
    "text": $scope.editText.text
  }
  textService.edit(contentObj, this.onSuccessEdit, this.onFailureEdit);
}

,
onSuccessEdit: function (data) {
  $scope.showEdit=false;
  $scope.content.text=data;
}

,
onFailureEdit: function (data) {
  $scope.showEdit=true;
}

＆＃13;

<!-- Html code -->

<button ng-click="edit('edit')">edit</button>
<div ng-show="showEdit">
  <button ng-click="save('edit')">save</button>
  <button ng-click="cancel('edit')">cancel</button>
</div>

<p ng-if="!showEdit">{{content.text}}</p>
<div ng-if="showEdit" ng-model="content.text">
  <textarea></textarea>
</div>

＆＃13;

Answer 1

我认为你的cancel应该是这样的

cancel: function(value) {
    $scope.showEdit = false;
    $scope[value] = false;
    $scope.editText = null;
  },

这里的工作示例

angular.module("app", []).controller("text", [
  "$scope",
  function($scope) {
    $scope.text = "test"
    $scope.showEdit = false;

    $scope.Contents = {
      text: "teeeeeeeeeest"
    };
    $scope.editText = '';
    $scope.modules = {
      edit: function(value) {
        $scope.showEdit = true;
        $scope[value] = true;
        $scope.editText = angular.copy($scope.Contents);
      },

      cancel: function(value) {
        $scope.showEdit = false;
        $scope[value] = false;
        $scope.editText = null;
      },

      save: function(value) {
        $scope.Contents = angular.copy($scope.editText);
        $scope.showEdit = false;
        $scope.editText = null;
        $scope[value] = false;
      },

      onSuccessEdit: function(data) {
        $scope.showEdit = false;
        $scope.content.text = data;
      },
      onFailureEdit: function(data) {
        $scope.showEdit = true;
      }
    };
  }
]);

<div ng-app="app">
  <div ng-controller="text">

    <button ng-click="modules.edit('edit')">edit</button>
    <div ng-show="showEdit">
      <button ng-click="modules.save('edit')">save</button>
      <button ng-click="modules.cancel('edit')">cancel</button>
    </div>

    <p ng-if="!showEdit">{{content.text}}</p>
    <textarea ng-if="showEdit" ng-model="editText.text">
      </textarea> Original Text: {{Contents.text}} <br> Editer Text: {{editText.text}}

  </div>
</div>

在angularjs中编辑内容时，取消功能无效？

1 个答案: