我有一个带有xeditable表的指令,我可以编辑每一行,它可以正常工作。我希望能够使用复选框和编辑选中一次显示多行的行形式。我的解决方案不起作用。
Plunker:https://plnkr.co/edit/MiQnFxcRyoPSb2utv3Qe?p=preview
索引:
<table class="table table-condensed table-hover">
<thead>
<tr>
<th style="width: 5%">Check</th>
<th style="width: 5%">id</th>
<th style="width: 10%">name</th>
<th style="width: 10%">surname</th>
<th style="width: 10%">date of birth</th>
<th style="width: 10%">mobile number</th>
<th style="width: 30%">adress (city + street + house number)</th>
<th style="width: 20%" ><button class="btn btn-primary" ng-click="editMany()"> Edit Selected </button> </th>
</tr>
</thead>
<tbody>
<tr edit-row ng-repeat="obj in users " user = 'obj' track by $index>
</tr>
</tbody>
</table>
网址模板:
<td><input type="checkbox" ng-checked="selected" ng-click="selected = !selected"/>
<td>
<!-- id -->
<span>
{{ user.id }}
</span>
</td>
<td>
<!-- editable name -->
<span editable-text='user.name' e-name='name' e-form='rowform' e-required>
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable surname -->
<span editable-text='user.surname' e-name='surname' e-form='rowform' e-required>
{{ user.surname || 'empty' }}
</span>
</td>
<td>
<!-- editable date_of_birth) -->
<span editable-text='user.date_of_birth' e-name='date_of_birth' e-form='rowform' e-required>
{{ user.date_of_birth || 'empty' }}
</span>
</td>
<td>
<!-- editable mobile_number) -->
<span editable-text='user.mobile_number' e-name='mobile_number' e-form='rowform' e-required>
{{ user.mobile_number || 'empty' }}
</span>
</td>
<td>
<!-- editable city) -->
<span editable-text="user.address.city" e-name="address.city" e-form="rowform" e-required>{{user.address.city}}</span>
<!-- editable street) -->
<span editable-text="user.address.street" e-name="address.street" e-form="rowform" e-required>{{user.address.street}}</span>
<!-- editable house_number) -->
<span editable-text="user.address.house_number" e-name="address.house_number" e-form="rowform" e-required>{{user.address.house_number}}</span>
</td>
<td style='white-space: nowrap'>
<!-- form -->
<form editable-form name='rowform' onbeforesave='saveUser(user)' ng-show='rowform.$visible' class='form-buttons form-inline' shown='inserted == user'>
<button type='submit' ng-disabled='rowform.$waiting' class='btn btn-primary'>
save
</button>
<button type='button' ng-disabled='rowform.$waiting' ng-click='rowform.$cancel()' 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>
<button class='btn btn-danger' ng-click='remove($index)'>delete</button>
</div>
</td>
指令:
angular.module("app").directive("editRow", function(UsersFactory, UserFactory) {
return {
templateUrl: '/directives/EditableTable.html',
scope: {
user: '='
},
restrict: 'EA',
link: function ($scope, element, $attrs) {
$scope.editMany = function() {
if ($scope.selected) {
$scope.rowform.$show();
$scope.selected = false;
}
};
}
};
});
为什么不显示所选行的行形式?