Customize the cancel code button of the X-editable (AngularJS)

Question

Is that possible when the user add a new row and by clicking on the cancel button(without put any data), the row will be deleted. Otherwise how can I change the cancel button code, because this one use the default xeditable code of angularJS.(Or maybe how can I call the delete function if the row is empty?)

This is the EXAMPLE.

HTML for the cancel button:

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

Answer 1

You may call your own function. To achieve this you should change your html like this:

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

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

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

As you can see there is a new function with the form and the current index as parameter. In your controller you have to define this function:

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

Now you can do your own stuff and call the form $cancel if you are done.

Answer 2

Alternatively if you look at xeditable.js you'll see that $cancel() internally calls $oncancel() which looks for oncancel attribute on the form and calls the function supplied in it. So instead of handling the form in the controller you could have:

<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>