自定义 X-editable (AngularJS) 的取消代码按钮

Posted 2023-05-08

【中文标题】自定义 X-editable (AngularJS) 的取消代码按钮

【英文标题】：Customize the cancel code button of the X-editable (AngularJS)

【发布时间】：2014-02-15 16:46:57

【问题描述】：

当用户添加新行并单击取消按钮（不放置任何数据）时，是否可以删除该行。 否则我该如何更改取消按钮代码，因为这个使用angularJS的默认xeditable代码。（或者如果该行为空，我该如何调用删除函数？）

这是EXAMPLE。

HTML 用于取消按钮：

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

【参考方案1】：

你可以调用你自己的函数。为此，您应该像这样更改您的 html：

<button type="button" ng-disabled="rowform.$waiting" 

        ng-click="cancelAdvice(rowform, $index)" 

        class="btn btn-default">
        cancel
</button>

如您所见，有一个新函数，它以表单和当前索引作为参数。在你的控制器中，你必须定义这个函数：

$scope.cancelAdvice = function(rowform, index)
   console.log(rowform, index);
   $scope.removeUser(index);
   rowform.$cancel();

现在你可以做你自己的事情，如果你完成了，调用表格 $cancel。

【参考方案2】：

或者，如果您查看 xeditable.js，您会看到 $cancel() 内部调用 $oncancel() 来查找 oncancel 表单上的属性并调用其中提供的函数。因此，除了在控制器中处理表单之外，您还可以：

<form editable-form name="rowform" onbeforesave="saveRole($data, $index)" oncancel="removeIfNewRow($index)" ng-show="rowform.$visible" class="form-inline" shown="inserted == role">
                <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
                    save
                </button>
                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                    cancel
                </button>
 </form>