Управление действием кнопки на основе видимости другой кнопки в форме

Question

Реализовано угловое масштабируемое и используемое xeditable для встроенного редактирования строк. Каждая загружаемая запись будет иметь кнопку EDIT. И новые записи могут быть добавлены с помощью кнопки Добавить новую строку, для каждой новой записи будет кнопка SAVE и кнопка CANCEL.

Требование - это как. Пользователь которые позволяют редактировать (Edit), если нет более активного сохранения (SAVE & ОТМЕНА) Кнопка есть на странице,

Как я могу добиться этого

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

Я нашел трудным и неудобным, чтобы попытаться работать с базовой моделью x-редактируемых директив. Мое предложение - использовать события ng-click и onftersave для формы, чтобы отслеживать, что открыто, а что нет. Один из способов - сохранить строки в массиве editStateObjects. Что-то вроде

$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(); 
} 

вам нужно добавить onaftersave="closeRowform(rowform) к элементу rowfrom и изменить ng-click функцию editbutton быть editRowform(rowform). Кроме того, если у вас есть кнопка сохранения, вам нужно вызвать функцию editRowform для функции добавления. Наконец, кнопка отмены должна будет вызвать функцию closeRowform (которая может включать параметр forceCancel и форму строки. $ Cancel() вызывает внутренне, если необходимо)