Search code examples
javascriptangularjsx-editable

Getting the current value of an xeditable checkbox while form is being edited


I would like to have a checkbox to be displayed if another checkbox is checked, but only have this when the form is being edited. Since the model doesn't get updated when it's being edited, I can't ng-show the second checkbox based on the model's value.

tl;dr: getting value of xeditable checkbox during editing form

This is the html that I'm currently using:

    <div class="col-xs-1 pad-xs text-center">
      <span editable-checkbox="field.left">
        <span class="fa fa-check" ng-if="field.left"></span>
      </span>
    </div>
    <div class="col-xs-1 pad-xs text-center">
      <span editable-checkbox="field.right" ng-show="~~here~~">
        <span class="fa fa-check" ng-if="field.right"></span>
      </span>
    </div>

I can add e-ng-change to the first checkbox to determine the change, but I have no way of retrieving the value correctly.


Solution

  • Oh, I think I figured it out.

    If you pass this to a function, the $data parameter will reflect the current value of the checkbox.

    <div class="col-xs-1 pad-xs text-center">
      <span editable-checkbox="field.left" e-ng-change="changeField(this, field)">
        <span class="fa fa-check" ng-if="field.left"></span>
      </span>
    </div>
    <div class="col-xs-1 pad-xs text-center">
      <span editable-checkbox="field.right" e-ng-show="field._left">
        <span class="fa fa-check" ng-if="field.right"></span>
      </span>
    </div>
    

    In my changeField function, I'm using this

      $scope.changeField = function(self, field) {
        field._left = self.$data;
      };