Angular x-editable show some form control onchange

Question

I have an angular x-editable sample here where i am trying to show / hide a form control based on the status value like,

  <div ng-show="user.status == '1'">
      <span class="title">Show: </span>
      <span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
    </div>

It will be shown only when i save the form. How can I make it show when changing the control field itself?

Answer 1

Fixed demo here.

You can get there by directive e-ng-change.

Sample codes:

    <div>
      <!-- editable status (select-local) -->
      <span class="title">Status: </span>

      <!-- by e-ng-change, get result before save, and asign to user.showstatus -->
      <span editable-select="user.status" e-ng-change="user.showstatus=$data;" e-name="status" e-ng-options="s.value as s.text for s in statuses">
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      </span>
    </div>  

     <!-- toggle display by user.showstatus -->
     <div ng-show="user.showstatus == '1'">
      <span class="title">Show: </span>
      <span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
    </div>

Credit: Angular x-editable github issue #105