如何删除Angular-xeditable表上提交的行?

时间:2016-02-16 18:56:47

标签: javascript angularjs twitter-bootstrap

这是我第一次在我的应用中使用Angular-Xeditable。我遇到了一个问题,试图弄清楚如何删除已添加或修改的x可编辑行,然后使用保存按钮将其提交到通过ng-repeat循环访问的对象中。

如果我更改行的值然后保存它,我将无法从表中删除该行。如果我按下删除按钮,则使用array.splice(index,1)功能从范围内的对象中删除该行,但不会从我的表中删除。

在我的HTML中我有:

modalInst.saveActivity = function(data) {
            console.log('Saving Activity: ' + data);
        };

        modalInst.removeActivity = function(index) {
            modalInst.pendingActivities.splice(index,1);
        };

        modalInst.addActivity = function() {
            modalInst.inserted = {
                name: '',
                description: '',
                completed: false,
                isNew: true
            };
            modalInst.pendingActivities.push(modalInst.inserted);
        };

        modalInst.checkActivityName = function(data) {
            if(!data) {
                return "";
            }
        };

        modalInst.checkActivityDescription = function(data) {
            if(!data) {
                return "";
            }
        };

        modalInst.activityList = [];
        prospectSvc.getBudget(modalInst.client).then(function(budget){
            console.log("Budget", budget);
            modalInst.activityList = budget.product.tasks;
        });

        modalInst.showActivityList = function(activity) {
            var selected = [];
            if(activity.name) {
                selected = $filter('filter')(modalInst.activityList, {name: activity.name});
            }
            return selected.length ? selected[0].name : 'Not set';
        };
<button type="button" ng-click="visitModalCtrl.addActivity()" ng-disabled="!visitModalCtrl.editable" class="btn btn-primary pull-right">Nueva tarea<br/><br/>
  <table class="table table-bordered table-hover bg-white">
    <tr style="font-weight: bold">
      <td style="width:50%">Tarea</td>
      <td style="width:35%">Descripci&oacute;n</td>
      <td style="width:5%"></td>
      <td style="width:10%"></td>
    </tr>
    <tr ng-repeat="pendingActivity in visitModalCtrl.pendingActivities" ng-form="" editable-form="" name="rowform" onbeforesave="visitModalCtrl.saveActivity($data)" shown="visitModalCtrl.inserted == pendingActivity">
      <td><span editable-select="pendingActivity.name" e-name="name" e-form="rowform" e-ng-options="act.name as act.name for act in visitModalCtrl.activityList">{{ visitModalCtrl.showActivityList(pendingActivity) }}</span></td>
      <td><span editable-text="pendingActivity.description" e-name="description" e-form="rowform" onbeforesave="visitModalCtrl.checkActivityDescription($data)" e-required="">{{ pendingActivity.description || &apos;empty&apos; }}</span></td>
      <td><span ng-if="!pendingActivity.completed" e-name="completed" e-form="rowform" class="fa fa-clock-o"></span><span ng-if="pendingActivity.completed" e-name="completed" e-form="rowform" class="fa fa-check-circle"></span></td>
      <td style="white-space: nowrap">
        <form editable-form="" name="rowform" class="form-buttons form-inline"></form>
        <div ng-show="rowform.$visible" class="buttons">
          <button type="submit" ng-disabled="rowform.$waiting || pendingActivity.completed || !visitModalCtrl.editable" ng-click="rowform.$submit()" title="Save" class="btn btn-sm btn-info"><em class="fa fa-save"></em></button>
          <button type="button" ng-disabled="rowform.$waiting || pendingActivity.completed || !visitModalCtrl.editable" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default"><em class="fa fa-times"></em></button>
        </div>
        <div ng-show="!rowform.$visible" class="buttons">
          <button ng-click="rowform.$show()" title="Edit" ng-disabled="pendingActivity.completed || !visitModalCtrl.editable" class="btn btn-sm btn-info"><em class="fa fa-pencil"></em></button>
          <button ng-click="visitModalCtrl.removeActivity($index)" title="Delete" ng-disabled="pendingActivity.completed || !visitModalCtrl.editable" class="btn btn-sm btn-danger"><em class="fa fa-trash"></em></button>
        </div>
      </td>
    </tr>
  </table>
</button>

如何删除从表中编辑或添加的行?

0 个答案:

没有答案