我正在使用x-editable rowform表来显示一些可编辑的内容。每行包含一个带有编辑/删除按钮的表单,如果行表格处于活动状态,则该表单将更改为提交/取消按钮。
而不是向表中插入一个空的新行的“添加”按钮,我希望有一个模式显示一个表格,用于填充新行的所有数据。直到这里一切正常。
模态打开,可以填写数据,并且单击模态中的另一个“添加”按钮,将模态表单的数据插入到新的行表单中。
唯一的问题:rowform仍处于活动状态且尚未提交。我需要点击表格行中的“提交”按钮来保存更改。
如何在控制器中提交活动的rowform?
模态
<div id="modal-addStudent" class="modal fade animate" data-backdrop="true">
<form>
FORM ELEMENTS
<button type="reset" data-dismiss="modal">Close</button>
<button type="submit" ng-click="addTR(insert)" data-dismiss="modal">Add</button>
</form>
</div>
表格
<table>
<tr>
TDs...
<td>
<button type="button" data-toggle="modal" data-target="#modal-addTR" class="btn btn-xs white pull-right">
<i class="material-icons"></i> Add
</button>
</td>
</tr>
<tr ng-repeat="tr in trs | filter:filterTrs">
TDs
<td style="white-space: nowrap">
<form editable-form name="rowform" onbeforesave="saveTR(tr)" ng-show="rowform.$visible" class="form-buttons form-inline pull-right" shown="inserted == tr">
<button type="submit" ng-disabled="rowform.$waiting">Submit</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="cancel()">Cancel</button>
</form>
<div class="controls pull-right" ng-show="!rowform.$visible">
<button class="btn white btn-xs" ng-click="rowform.$show()">
Edit
</button>
<button class="btn white btn-xs" ng-click="deleteTR($index)">
Del
</button>
</div>
</td>
</tr>
</table>
在控制器中添加TR的功能
function addTR(tr) {
vm.inserted = {
id: vm.students.length+1,
data: tr.data,
isNew: true
};
vm.trs.unshift(vm.inserted);
//rowform should be submitted here
};