单击按钮时在Angular中选择多个复选框

Question

我的 HTML 代码中有一个表格，其中的行由 AngularJS ng-repeat 生成。每行在第一列中包含一个复选框和其他数据 在相应的列中。当单击另一个 div 中存在的此按钮时，我试图将所有复选框标记为已选中。

<tbody>
  <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
    <td name="checkbox">
      <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" />
    </td>
    <td>{{ row.data1 }}</td>
    <td>{{ row.data2 }}</td>
  </tr>
</tbody>

按钮如下：

<div class="btn-group">
	<button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button>
</div>

在单击复选框时调用一个方法，该复选框将该特定行添加到数组中。如果我在单击按钮时将复选框标记为选中，将如何调用该方法。

Answer 1

使用指令ng-checked

<tbody>
  <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
    <td name="checkbox">
      <input type="checkbox" ng-checked="checkAll" ng-model="row.checked" ng-style="row.checkboxStyle" ng-click="setSelectedRow(row)" />
    </td>
    <td>{{ row.data1 }}</td>
    <td>{{ row.data2 }}</td>
  </tr>
</tbody>

在你的按钮功能中

selectAllGrid(){
 $scope.checkAll=true;
}

Answer 2

你可以这样做：

<table>
    <tbody>
      <tr ng-repeat="row in myObject track by $index" ng-class-even="'alternate-row'">
        <td name="checkbox">
          <input type="checkbox" ng-model="row.checked" ng-style="row.checkboxStyle" />{{row.checked}}
        </td>
        <td>{{ row.data }}</td>
      </tr>
    </tbody>
  </table>


  <div class="btn-group">
    <button type="button" id="selectAll" class="btn btn-default" title="Select All" ng-click="selectAllGrid()">Select All</button>
  </div>

在你的控制器中：

app.controller('MainCtrl', function($scope) {
  $scope.allchecked  = false;

  $scope.selectAllGrid = function(){
    console.log($scope.allchecked);
    $scope.allchecked = !$scope.allchecked
   for(var i =0; i<$scope.myObject.length; i++) {
     $scope.myObject[i].checked = $scope.allchecked ;
   }
  }

  $scope.myObject = [
      {"data": "sdfsdf"},
      {"data": "asdfassafs"},
      {"data": "asesfrsaedfsadfsadsd"}
    ]
});

打工仔here