Question

所以，我有一个有多行的表。我试图用一个按钮选择每一行;另外，在表格标题中，有一个全选按钮，可以选择所有行中的所有按钮。这是html：

<table class="table" ng-controller="myController">
  <thead>
    <tr class="info">
      <th>Company Name</th>
      <th>Address</th>
      <th>
       <input type="button" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
      </th>
    </tr>
   </thead>
   <tbody ng-repeat="company in fieldData">
    <tr>
     <td>{{ company.name }}</td>
     <td>{{ company.address }}</td>
     <td style="text-align: center">
      <input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false">
     </td>
    </tr>
   </tbody>
</table>

如何使用jQuery创建一个函数来更改所有行的aria按下的值？有什么想法吗？

Answer 1

在＆＃34;选择全部＆＃34;上设置ng-model。复选框然后使用ng-checked指令选择/取消全选。

<table class="table" ng-controller="myController">
  <thead>
    <tr class="info">
      <th>Company Name</th>
      <th>Address</th>
      <th>
       <input type="button" ng-model="selectAll" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
      </th>
    </tr>
   </thead>
   <tbody ng-repeat="company in fieldData">
    <tr>
     <td>{{ company.name }}</td>
     <td>{{ company.address }}</td>
     <td style="text-align: center">
      <input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false" ng-checked="selectAll">
     </td>
    </tr>
   </tbody>
</table>

Answer 2

你正在使用Angular js。

我写了一个简单的代码，看看

<div>
<ul ng-controller="checkboxController">
    <li>Check All
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
    </li>
    <li ng-repeat="item in Items">
        <label>{{item.Name}}
            <input type="checkbox" ng-model="item.Selected" />
        </label>
    </li>
</ul>

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {

角度代码

$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });

};

}）;

创建“全选”按钮以选择所有按钮

2 个答案: