我有一个 AngularJS指示 http://docs.angularjs.org/guide/directive在以下模板中呈现实体集合:
<table class="table">
<thead>
<tr>
<th><input type="checkbox" ng-click="selectAll()"></th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in entities">
<td><input type="checkbox" name="selected" ng-click="updateSelection($event, e.id)"></td>
<td>{{e.title}}</td>
</tr>
</tbody>
</table>
正如你所看到的,这是一个<table>
其中每一行都可以通过其自己的复选框单独选择,或者可以通过位于<thead>
。非常经典的用户界面。
最好的方法是什么:
- 选择一行(即,当选中该复选框时,将所选实体的 id 添加到内部数组,并将 CSS 类添加到
<tr>
包含反映其选定状态的实体)?
- 一次选择所有行? (即对所有行执行前面描述的操作
<table>
)
我当前的实现是将自定义控制器添加到我的指令中:
controller: function($scope) {
// Array of currently selected IDs.
var selected = $scope.selected = [];
// Update the selection when a checkbox is clicked.
$scope.updateSelection = function($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
if (action == 'add' & selected.indexOf(id) == -1) selected.push(id);
if (action == 'remove' && selected.indexOf(id) != -1) selected.splice(selected.indexOf(id), 1);
// Highlight selected row. HOW??
// $(checkbox).parents('tr').addClass('selected_row', checkbox.checked);
};
// Check (or uncheck) all checkboxes.
$scope.selectAll = function() {
// Iterate on all checkboxes and call updateSelection() on them??
};
}
更具体地说,我想知道:
- 上面的代码属于控制器还是应该放在
link
功能?
- 鉴于 jQuery 不一定存在(AngularJS 不需要它),那么进行 DOM 遍历的最佳方法是什么?没有 jQuery,我很难选择父级
<tr>
的给定复选框,或选择模板中的所有复选框。
- Passing
$event
to updateSelection()
看起来不太优雅。是否有更好的方法来检索刚刚单击的元素的状态(选中/未选中)?
谢谢。
这就是我做这类事情的方式。 Angular 倾向于支持对 dom 的声明式操作,而不是命令式操作(至少我一直是这样使用的)。
标记
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox"
ng-click="selectAll($event)"
ng-checked="isSelectedAll()">
</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in entities" ng-class="getSelectedClass(e)">
<td>
<input type="checkbox" name="selected"
ng-checked="isSelected(e.id)"
ng-click="updateSelection($event, e.id)">
</td>
<td>{{e.title}}</td>
</tr>
</tbody>
</table>
并在控制器中
var updateSelected = function(action, id) {
if (action === 'add' && $scope.selected.indexOf(id) === -1) {
$scope.selected.push(id);
}
if (action === 'remove' && $scope.selected.indexOf(id) !== -1) {
$scope.selected.splice($scope.selected.indexOf(id), 1);
}
};
$scope.updateSelection = function($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
$scope.selectAll = function($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
for ( var i = 0; i < $scope.entities.length; i++) {
var entity = $scope.entities[i];
updateSelected(action, entity.id);
}
};
$scope.getSelectedClass = function(entity) {
return $scope.isSelected(entity.id) ? 'selected' : '';
};
$scope.isSelected = function(id) {
return $scope.selected.indexOf(id) >= 0;
};
//something extra I couldn't resist adding :)
$scope.isSelectedAll = function() {
return $scope.selected.length === $scope.entities.length;
};
EDIT: getSelectedClass()
期望整个实体,但仅使用实体的 id 来调用它,现已更正
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)