Control a button action based on the visibility of another button in the form

Question

Implemented a angular smartable and used xeditable for inline editing the rows. Each record that is loaded will have an EDIT button. And new records can be added using Add New row button, for each new record added there will be a SAVE button and a CANCEL button.

Requirement is like. User are allow to edit(EDIT) if there is no more active save(SAVE & CANCEL) button is there in the page,

How can I acheive this

//html

<style>
   .sortable {
   cursor: pointer;
   }
   .sortable:after {
   content: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==);
   padding-left: 1em;
   }
   .st-sort-ascent:after {
   content: '\25B2';
   }
   .st-sort-descent:after {
   content: '\25BC';
   }
   div[ng-app] { margin: 10px; }
   .table {width: 100% }
   form[editable-form] > div {margin: 10px 0;}

</style>
<div class="col-md-12 ng-scope" ng-controller="AppSettingsController as appCtrl">
<div class="alert  alert-success" role="alert" ng-show="appCtrl.successMsg.length > 0"> 
         <strong>{{appCtrl.successMsg}}</strong> 
      </div>
      <div class="alert  alert-danger" role="alert" ng-show="appCtrl.errorMsg.length > 0"> 
         <strong>{{appCtrl.errorMsg}}</strong> 
      </div>
   <button type="button" ng-click="appCtrl.addRandomItem(); "appCtrl.flag= false" class="btn btn-primary">
   <i class="glyphicon glyphicon-plus">
   </i> Add new record
   </button>
   <table st-table="appCtrl.displayedCollection" st-safe-src="appCtrl.param" class="table table-striped">
      <thead>
         <tr>
            <th class="sortable" st-sort="parameterkey">Parameter Key</th>
            <th class="sortable" st-sort="description">Description</th>
            <th class="sortable" st-sort="value">Value</th>
            <th class="sortable" st-sort="type">Type</th>
            <th class="sortable" st-sort="active">Active</th>
            <th> Action</th>
         </tr>
         <tr>
            <th colspan="6">
               <input st-search="" class="form-control" placeholder="global search ..." type="text" />
            </th>
         </tr>
      </thead>
      <tbody>
         <tr ng-repeat="row in appCtrl.displayedCollection">
            <td>
               <span editable-text="row.key" e-name="key" e-form="rowform"  onbeforesave="appCtrl.checkName($data, user.id)"  e-ng-readonly="appCtrl.flag" e-required >
               {{ row.key }}
               </span>
            </td>
            <td>
               <span editable-text="row.description" e-name="description" e-form="rowform"  onbeforesave="checkName($data, user.id)" e-required>
               {{row.description|| 'empty' }}
               </span>
            </td>
            <td>
               <span editable-text="row.value" e-name="value" e-form="rowform"  onbeforesave="appCtrl.checkName($data, user.id)" e-required>
               {{row.value|| 'empty' }}
               </span>
            </td>
            <td>
               <span editable-text="row.type" e-name="type" e-form="rowform"  onbeforesave="appCtrl.checkName($data, user.id)" e-required>
               {{row.type|| 'empty' }}
               </span>
            </td>
            <td>
               <span editable-text="row.activeYn" e-name="activeYn" e-form="rowform"  onbeforesave="appCtrl.checkName($data, user.id)" e-required>
               {{row.activeYn|| 'empty' }}
               </span>
            </td>
            <td style="white-space: nowrap">
               <!-- form -->
               <form editable-form  name="rowform" onbeforesave="appCtrl.saveParam($data, row.paramId, row)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="appCtrl.inserted == row">
                  <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary" >
                  save
                  </button>
                  <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel(); appCtrl.isEmptyRow(row)" class="btn btn-default" >
                  cancel
                  </button>
               </form>
               <div class="buttons" ng-show="!rowform.$visible">
                  <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

Answer 1

I have found it cumbersome and awkward to try to work with the underlying model of the x-editable directives. My suggestion is to use the ng-click and onaftersave events for the form to keep track of what is open and what is not. One way would be to save the rowforms to an editStateObjects array. Something like

$scope.editStateObjects = [];

$scope.closeRowform = function(rowform) {
    var idx = $scope.editStateObjects.indexOf(rowform);
    if (idx!=-1) $scope.editStateObjects.splice(idx,1);
}

$scope.editRowform = function(rowform) {
    $scope.editStateObjects.push(rowform);
    rowfrom.$show();
}

you'd need to add an onaftersave="closeRowform(rowform) to the rowfrom element and change the ng-click function of the editbutton to be editRowform(rowform). Additionally, if you have a save button, you will have to call the editRowform funciton form the add function. Lastly, the cancel button will have to call the closeRowform function (which could include a forceCancel parameter and a rowform.$cancel() call internally, if needed)