这是我第一次在我的应用中使用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ó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 || 'empty' }}</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>
如何删除从表中编辑或添加的行?