2 Xeditable 角度指令上的取消按钮答案

【问题标题】：2 Cancel buttons on Xeditable angular directive2 Xeditable 角度指令上的取消按钮
【发布时间】：2015-07-13 12:19:56
【问题描述】：

我正在使用xeditable angular 指令。你能告诉我如何使用 2 个取消按钮吗？因为我需要在上面实现 2 个功能。我的意思是 cancel + my work 1 和 cancel + my work 2。提前致谢。

HTML

<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

//UI code here

<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>

</form>

// cancel all changes
  $scope.cancel = function() {

  };

JSFiddle

【问题讨论】：

标签： javascript angularjs x-editable

【解决方案1】：

您可以在表单中有 2 个取消按钮并将表单作为属性传递。然后在相应的取消函数中，您可以调用 form.$cancel 然后执行您的逻辑。 form.$cancel 的作用与调用 ng-click="tableform.$cancel()" 的作用相同。

玩它：Plunker

  //html
  <button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
  <button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>

  //controller
  $scope.cancel1 = function(tableForm) {
    // Call tableForm cancel to reset
    tableForm.$cancel();
    //Logic1
  };

  $scope.cancel2 = function(tableForm) {
    // Call tableForm cancel to reset
    tableForm.$cancel();
    //Logic2
  };

【讨论】：

【解决方案2】：

实际上，您应该能够控制取消按钮的功能。如果您仔细查看代码，您会看到，它们只是创建一些按钮并根据当前表单状态显示或隐藏它们（form.$visible）

做这样的事情。

 <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel1</button>
    </div>

这是example

【讨论】：

根据您的示例，如何在 1 个事件上提供 2 个功能？您只使用了oncancel 事件。
我需要在这些事件上实现 2 个方法或行为（即在 2 个取消事件上）。
在这种情况下，我认为您可能必须为每个跨度创建一个带有名称的电子表单，以便您可以访问每个表单的 $cancel 方法
不。那样不行。因为我需要同时使用cancel 按钮访问同一个表单的属性。不能使用2 个表单。