2 Xeditable angular 指令上的取消按钮

Question

我正在使用 xeditable angular directive.Could 你能告诉我如何使用 2 个取消按钮吗？因为我需要在 it.I 上实现 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>

JS

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

  };

JSFiddle

Answer 1

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

做这样的事情。

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

这是一个example

Answer 2

您可以在表单中设置 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 Xeditable angular 指令上的取消按钮

2 Cancel buttons on Xeditable angular directive

javascript

angularjs

x-editable