ng-table標頭全選復選框

Question

我正在使用ng-table來顯示數據。 我正在使用下面的代碼來選擇所有復選框。 選擇所有復選框使用text / ng-template插入。 如果我使用ng-table之外的select all復選框，則所有功能均有效。 但是在帶有text / ng-template的ng表中，功能無法正常工作。

  $scope.selectAll = function() { angular.forEach($scope.invoiceApprovalList, function(invoiceApproval) { invoiceApproval.checkboxItem= $scope.selectedAll; }); }; // use the array "every" function to test if ALL items are checked $scope.checkIfAllSelected = function() { $scope.selectedAll = $scope.invoiceApprovalList.every(function(invoiceApproval) { return invoiceApproval.checkboxItem == true; }) }; 

 <script type="text/ng-template" id="all.html"> <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()" /> </script> <table ng-table="invoicetableParams" ng-show="invoicetableParams!=null" class="table scroll table-condensed table-bordered table-striped table-scroll" id="in-app"> <tbody> <tr ng-repeat="invoiceApproval in $data"> <td header="'all.html'" class="row-center" style="width:20%"> <input class="myCheckBox" ng-model="invoiceApproval.checkboxItem" type="checkbox" ng-click="checkIfAllSelected()"/></td> <td data-title="'Customer Name'" style="width:20%" filter="{'customerName':'text'}" sortable="'customerName'" class="row-center"> <div class="row-center">{{invoiceApproval.customerName}}</div> </td> <td data-title="'Invoice Number'" style="width:20%" sortable="'invoiceNumber'" class="row-center"> <div class="row-center">{{invoiceApproval.invoiceNumber}}</div> </td> <td data-title="'Invoice Date'" style="width:20%" class="row-center"> <div class="row-center">{{invoiceApproval.invoiceDate | date}}</div> </td> <!-- <td data-title="'Action'" class="row-center" style="text-align:right"> <button type="button" class="btn grid-btn row-view sm-btn" ng-click="loadCustomerInvoicePDFviewPDF(invoiceApproval.customerInvoiceHeaderID,1)"> <span class="glyphicon glyphicon-list"></span> Preview </button> </td> --> </tr> </tbody> </table> 

Answer 1

它確實按預期工作。 不幸的是，您沒有顯示足夠的代碼來重現您的問題。 請比較您的解決方案，並確保以正確的方式使用ng-include ：

視圖

<div ng-controller="MyCtrl">
  <table ng-table="invoicetableParams" ng-show="invoicetableParams!=null" class="table scroll table-condensed table-bordered table-striped table-scroll" id="in-app">
    <tbody>
      <tr ng-repeat="invoiceApproval in data">
        <td ng-include="'all.html'"></td>
        <td data-title="'Customer Name'" style="width:20%" filter="{'customerName':'text'}" sortable="'customerName'" class="row-center">
          <div class="row-center"> {{invoiceApproval.customerName}}</div>
        </td>
        <td data-title="'Invoice Number'" style="width:20%" sortable="'invoiceNumber'" class="row-center">
          <div class="row-center">{{invoiceApproval.invoiceNumber}}</div>
        </td>
        <td data-title="'Invoice Date'" style="width:20%" class="row-center">
          <div class="row-center">{{invoiceApproval.invoiceDate | date}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/ng-template" id="all.html">
  <input type="checkbox" ng-model="invoiceApproval.checkboxItem" ng-click="selectAll()" />
</script>

AngularJS應用

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.selectAll = function() {
    $scope.data.forEach(function(invoiceApproval) {
      return invoiceApproval.checkboxItem = true;
    });
  }

  $scope.invoicetableParams = true;
  $scope.data = [{
      checkboxItem: false,
      customerName: 'test name 1',
      invoiceNumber: 'test name 1',
      invoiceDate: new Date()
    },
    {
      checkboxItem: false,
      customerName: 'test name 2',
      invoiceNumber: 'test name 2',
      invoiceDate: new Date()
    },
    {
      checkboxItem: false,
      customerName: 'test name 3',
      invoiceNumber: 'test name 3',
      invoiceDate: new Date()
    },
    {
      checkboxItem: false,
      customerName: 'test name 4',
      invoiceNumber: 'test name 4',
      invoiceDate: new Date()
    }
  ];
});

> 演示小提琴