ng-table标题选中所有复选框

Question

我正在使用ng-table来显示数据。我使用下面的代码来选择所有复选框。使用text / ng-template选择所有复选框插入。如果我使用ng-table外的select all复选框，则所有功能都有效。但是在带有text / ng-template的ng-table中，函数不起作用。

  $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()
    }
  ];
});

<强>＆GT; demo fiddle