Question

我完全糊涂了一点，需要任何人的帮助。通过各种例子，但没有什么可以帮助。

我有一个创建的动态表，添加了复选框。现在每当选择一行时，它的id将被绑定到一个数组，它将被显示在表的顶部。

我需要的是：选择全部功能的代码复选框。无论何时通过全选复选框选择所有行，都必须显示其ID。

以下是该表的代码：

<table>
<thead>
  <tr>
    <th>
      <input name="all"
      type="checkbox"
      ng-click="selectAll()" />
    </th>
    <th>ID</th>
    <th>Date</th>
  </tr>
</thead>
<tbody ng-repeat="x in cons">
  <tr>
    <td>
      <input type="checkbox" 
      name="selectedids[]"
      value="{{x.id}}"
      ng-checked="idSelection.indexOf(x.id) > -1" 
      ng-click="toggleSelection(x.id, idSelection)"> </td>
    <td>{{x.id}}</td>
    <td>{{x.title}}</td>
  </tr>
</tbody>

app.js：

  $scope.idSelection = [];
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {

    var idx = listSelection.indexOf(selectionName);
    // is currently selected
    if (idx > -1) {
        listSelection.splice(idx, 1);
    }
        // is newly selected
    else {
        listSelection.push(selectionName);
    }
};


//$scope.selectAll=function(){}
//Need code for this function to work

以下是demo：http://plnkr.co/edit/m9eQeXRMwzRdfCUi5YpX?p=preview。

如果有人可以指导，将不胜感激。

Answer 1

您需要一个变量来跟踪“全部”当前是否处于活动状态。如果没有，我们使用数组map函数创建一个包含所有项ID的新数组，并将其传递给idSelection。如果allSelected当前处于活动状态，我们会将空数组传递给idSelection

$scope.allSelected = false;

$scope.selectAll = function() {
  $scope.allSelected = !$scope.allSelected;

  if($scope.allSelected) {
    $scope.idSelection = $scope.cons.map(function(item) {
      return item.id;
    });
  } else {
    $scope.idSelection = [];
  }
}

用于选择/取消选择AngularJS表中所有复选框的代码

1 个答案: