Mam dyrektywę AngularJS, która renderuje kolekcję jednostek w następującym szablonie:
<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>
Jak widać, jest to miejsce, w <table>
którym każdy wiersz można wybrać indywidualnie za pomocą własnego pola wyboru lub wszystkie wiersze można zaznaczyć jednocześnie za pomocą głównego pola wyboru znajdującego się w <thead>
. Całkiem klasyczny interfejs użytkownika.
Jaki jest najlepszy sposób, aby:
- Wybierz pojedynczy wiersz (tj. Gdy pole wyboru jest zaznaczone, dodaj identyfikator wybranej jednostki do wewnętrznej tablicy i dodaj klasę CSS do jednostki
<tr>
zawierającej jednostkę, aby odzwierciedlić jej wybrany stan)? - Wybrać wszystkie wiersze jednocześnie? (tj. wykonaj opisane wcześniej czynności dla wszystkich wierszy w
<table>
)
Moja obecna implementacja polega na dodaniu niestandardowego kontrolera do mojej dyrektywy:
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??
};
}
Dokładniej, zastanawiam się:
- Czy powyższy kod należy do kontrolera, czy powinien znajdować się w
link
funkcji? - Biorąc pod uwagę, że jQuery niekoniecznie jest obecny (AngularJS tego nie wymaga), jaki jest najlepszy sposób na przechodzenie przez DOM? Bez jQuery trudno mi po prostu zaznaczyć rodzica
<tr>
danego pola wyboru lub zaznaczyć wszystkie pola wyboru w szablonie. - Przejście
$event
doupdateSelection()
nie wydaje się zbyt eleganckie. Czy nie ma lepszego sposobu na pobranie stanu (zaznaczonego / niezaznaczonego) elementu, który właśnie został kliknięty?
Dziękuję Ci.
ngChecked
dyrektywie. (Żałuję tylko, że nie możemy uczynić tego kodu nieco mniej szczegółowym.)