Как реагировать на нажатие флажка в директиве AngularJS?

У меня есть директива AngularJS , которая отображает набор сущностей в следующем шаблоне:

  

    

      

      
Title
    
  
  

    

      

      
{{e.title}}
    
  

Как видите, это

, где каждая строка может быть выбрана отдельно с помощью собственного флажка, или все строки могут быть выбраны сразу с помощью основного флажка, расположенного в . Довольно классический интерфейс.

Как лучше:

• Выберите одну строку (, т.е. когда флажок установлен, добавьте идентификатор выбранного объекта во внутренний массив и добавьте класс CSS в

, содержащий объект, чтобы отразить его выбранное состояние )?

Выделить все строки сразу? (т.е. выполнить ранее описанные действия для всех строк в

)

Моя текущая реализация заключается в добавлении пользовательского контроллера в мою директиву :

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 мне сложно просто выбрать родителя

данного флажка или установить все флажки в шаблоне.

Переход от $eventк updateSelection()выглядит не очень элегантно. Нет ли лучшего способа получить состояние (проверено/не проверено )элемента, по которому только что щелкнули?

Спасибо.

поделиться