Question

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

＆＃13;

<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>

＆＃13;

按钮如下：

＆＃13;

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

＆＃13;

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

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

在按钮上选择Angular中的多个复选框，然后单击

2 个答案: