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

Реализован угловой smartable и использован xeditable для встроенного редактирования строк. Каждая загруженная запись будет иметь кнопку EDIT. И новые записи могут быть добавлены с помощью кнопки «Добавить новую строку», для каждой добавленной новой записи будет кнопка «СОХРАНИТЬ» и кнопка «ОТМЕНА».

Требование похоже. Пользователь может редактировать (EDIT), если на странице больше нет активной кнопки сохранения (SAVE & CANCEL),

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

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

person user630209    schedule 02.02.2016    source источник


Ответы (1)


Мне показалось громоздким и неудобным пытаться работать с базовой моделью директив x-editable. Я предлагаю использовать события ng-click и onaftersave для формы, чтобы отслеживать, что открыто, а что нет. Один из способов — сохранить формы строк в массиве 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 кнопки редактирования на editRowform(rowform). Кроме того, если у вас есть кнопка сохранения, вам придется вызвать функцию editRowform из функции добавления. Наконец, кнопка отмены должна будет вызвать функцию closeRowform (которая может включать параметр forceCancel и внутренний вызов rowform.$cancel(), если это необходимо)

person Beartums    schedule 02.02.2016
comment
Нужно ли мне работать на основе значений editStateObjects []? - person user630209; 03.02.2016
comment
Я могу справиться с этим с помощью одной переменной флага, а не массива. Правильный ? - person user630209; 03.02.2016
comment
@ user630209, Круто. Да, вы можете работать с переменной с одним состоянием. Я думал, что у вас будет сразу несколько строк в состоянии редактирования, но, конечно, вы пытаетесь избежать этого. Если у вас есть переменная области видимости objectBeingEdited, вы можете скрыть и отобразить ее в зависимости от того, является ли rowform = objectBeingEdited, и установить соответствующее состояние в процедурах сохранения и редактирования. - person Beartums; 03.02.2016