Question

我在计算应用程序中的所选复选框时遇到了困难。我已经尝试过跟随其他一些堆栈溢出问题，但还没有骰子...如果你们有计算复选框的经验，一些帮助会很棒。

HTML：

<div class="row">
      <div class="col-md-12">
        <table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">
         <div>Total checked: ({{selectedCounter}})</div>
          <thead>
            <tr>
              <th>
                <st-select-all all="yourDisplayedCollection"></st-select-all>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="document in documents">
              <td><input type="checkbox" ng-model="document.isSelected"/></td>
            </tr>
          </tbody>
         </table>
      </div>
    </div>

控制器：

.controller（'DocumentsController'，/ ** @ngInject * / function（$ scope，restData，dateFormats，documents）{

  $scope.dateFormat = dateFormats.angularDateFilter;
  $scope.documents = documents.resultBag[0].documentBag;
  $scope.yourDisplayedCollection = [].concat(documents.resultBag[0].documentBag);
  $scope.selectAll = function (selected) {
        var documents = $scope.documents;
        angular.forEach(documents, function (documents) {
            documents.selected = selected;
        });
        // Update the counter
        if(selected){
            $scope.selectedCounter = documents.length;
        } else {
            $scope.selectedCounter = 0;
        }
    };

编辑：我在顶部有一个复选框复选框，这就是为什么我在表格中有yourDisplayedCollection以及ng-model =“document.isSelected”

Answer 1

如果我正确理解预期的结果，你需要重做几件事。

第一个（html）：

<tr ng-repeat="document in documents">
  //Bind your model directily to the selected property in your object (document)
    <td><input type="checkbox" ng-model="document.selected"/></td>
</tr>

第二：

$scope.selectAll = function (selected) {
    var documents = $scope.documents;
    angular.forEach(documents, function (doc) {
        if(doc.selected)
           $scope.selectedCounter +=1;
    });

};

每次都会给你一个正确的计数。虽然您的功能命名具有误导性。 SelectAll应该按字面意思选择全部。对我来说，它看起来像你的数量。

Answer 2

最简单的方法是使用Array.prototype.filter()并使用已过滤数组的长度

<input type="checkbox" ng-model="document.selected"/>

对于反击：

$scope.selectedCounter = $scope.documents.filter(function(item){
    return item.selected;
}).length;

需要注意的是，您正在打破始终使用ng-model中的对象的黄金法则。

ng-repeat创建子范围，当您在子范围中使用基元时，父控制器无法看到它更改

计算AngularJS中的选中复选框

2 个答案: