У меня есть директива AngularJS, которая отображает коллекцию сущностей в следующем шаблоне:
<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>
. Довольно классический интерфейс.
Как лучше всего:
- Выбрать одну строку (т.е. когда флажок установлен, добавить идентификатор выбранной сущности во внутренний массив и добавить класс 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>
элемент для данного флажка или выбрать все флажки в шаблоне. - Переход
$event
кupdateSelection()
не выглядит изящным. Нет ли лучшего способа получить состояние (отмечен / не отмечен) элемента, по которому только что щелкнули?
Спасибо.
ngChecked
директиве. (Я сожалею только о том, что мы не можем сделать этот код менее подробным.)