基於

Question

中另一個按鈕的可見性來控制按鈕操作實施了一個可裁剪的角度和用於內聯編輯行的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> 

Answer 1

我發現它嘗試使用x-editable指令的基礎模型時很麻煩和尷尬。我的建議是在表單中使用ng-click和onaftersave事件來跟蹤什麼是開放的，哪些不是。一種方法是將rowforms保存到一個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元素和改變editbutton的ng-click函數爲editRowform(rowform)。另外，如果你有一個保存按鈕，你將不得不從add函數調用editRowform函數。最後，取消按鈕將不得不調用closeRowform函數（如果需要，可以在內部包含一個forceCancel參數和一個rowform。$ cancel（）調用）