80

我有一个 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>. 相当经典的用户界面。

最好的方法是：

  • 选择单行（即选中复选框时，将所选实体的 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>给定复选框的父级，或者选择模板中的所有复选框。
  • 传递$event给updateSelection()似乎不是很优雅。难道没有更好的方法来检索刚刚单击的元素的状态（选中/未选中）吗？

谢谢你。

4

3 回答 3

123

这就是我一直在做这类事情的方式。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;
};

编辑：getSelectedClass()期望整个实体，但仅使用实体的 id 调用它，现在已更正

于 2012-08-08T21:06:15.513 回答
35

在处理复选框时，我更喜欢使用ngModel和ngChange指令。ngModel 允许您将复选框的选中/未选中状态绑定到实体上的属性：

<input type="checkbox" ng-model="entity.isChecked">

每当用户选中或取消选中复选框时，entity.isChecked值也会改变。

如果这就是您所需要的，那么您甚至不需要 ngClick 或 ngChange 指令。由于您有“全选”复选框，因此当有人选中复选框时，您显然需要做的不仅仅是设置属性的值。

当使用带有复选框的 ngModel 时，最好使用 ngChange 而不是 ngClick 来处理选中和未选中的事件。ngChange 就是针对这种情况而设计的。它利用ngModelController进行数据绑定（它向 ngModelController 的$viewChangeListeners数组添加了一个监听器。这个数组中的监听器在模型值被设置后被调用，避免了这个问题）。

<input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity()">

...在控制器中...

var model = {};
$scope.model = model;

// This property is bound to the checkbox in the table header
model.allItemsSelected = false;

// Fired when an entity in the table is checked
$scope.selectEntity = function () {
    // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
    for (var i = 0; i < model.entities.length; i++) {
        if (!model.entities[i].isChecked) {
            model.allItemsSelected = false;
            return;
        }
    }

    // ... otherwise ensure that the "allItemsSelected" checkbox is checked
    model.allItemsSelected = true;
};

同样，标题中的“全选”复选框：

<th>
    <input type="checkbox" ng-model="model.allItemsSelected" ng-change="selectAll()">
</th>

... 和 ...

// Fired when the checkbox in the table header is checked
$scope.selectAll = function () {
    // Loop through all the entities and set their isChecked property
    for (var i = 0; i < model.entities.length; i++) {
        model.entities[i].isChecked = model.allItemsSelected;
    }
};

CSS

什么是最好的方法......将 CSS 类添加到<tr>包含实体以反映其选定状态？

如果您使用 ngModel 方法进行数据绑定，您只需将ngClass指令添加到<tr>元素中，以便在实体属性更改时动态添加或删除类：

<tr ng-repeat="entity in model.entities" ng-class="{selected: entity.isChecked}">

在此处查看完整的Plunker。

于 2014-03-24T13:33:29.403 回答
11

Liviu 的回答对我非常有帮助。希望这不是糟糕的形式，但我做了一个小提琴，将来可能会帮助其他人。

需要的两个重要部分是：

    $scope.entities = [{
    "title": "foo",
    "id": 1
}, {
    "title": "bar",
    "id": 2
}, {
    "title": "baz",
    "id": 3
}];
$scope.selected = [];
于 2013-02-13T22:15:42.503 回答