如何计算选中的复选框（不在项目组中）

Question

我有一个问题。之前没有找到答案，或者这不是我的问题。

我正在构建静态应用程序，我需要在页面上有这样的表格。 （它们只是被绑定在角度......我是新手，我已经卡住了。

<table class="table table-responsive table-striped">
  <thead>      
    <tr>
        <th class="text-center"></th>
        <th class="text-center">1st</th>
        <th class="text-center">2nd</th>
        <th class="text-center">3rd</th>
        <th class="text-center">4th</th>
        <th class="text-center">5th</th>
        <th class="text-center">6th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First header</td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute1" /></td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute2" /></td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute3" /></td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute1" /></td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute2" /></td>
      <td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute3" /></td>
    </tr>

而且它更进一步......（即 myModel.myData[3]（具有 3 个属性）、myModel.myData[4]（具有 3 个属性）、myModel.myData[5]（具有 3 个属性））

现在...我必须数数：

• 选择了多少属性1（包括整个 myModel.MyData[1 到 N]）
• 选择了多少属性 2（包括整个 myModel.MyData[1 到 N]）
• 等等……

我现在得到的所有东西，我都可以通过：{{ myModel.myData[1].attribute1 }} 但它返回给我真/假（这很好） - 但无法在控制器中访问它。 （我的控制器js文件已经差不多清晰了，这里就不放了）

如果 some1 可以帮助我，我可以在哪里搜索解决方案，我将不胜感激。

Answer 1

看这个：

当复选框被点击时，这个函数会调用这个函数来填充数组的数据。在您可以使用 lenght 获得数组长度之后。

var app = angular.module('StarterApp', []);
app.controller('AppCtrl', function($scope){
    $scope.myModel = {myData1: [],  myData2: [], myData3: []};

    $scope.getChecked = function(){
        console.log($scope.myModel.myData1);
        console.log($scope.myModel.myData2);
        console.log($scope.myModel.myData3);
    }

    $scope.toggleSelection = function (data, value) {
        var idx = data.indexOf(value);
        // is currently selected
        if (idx > -1) {
            data.splice(idx, 1);
        }
        // is newly selected
        else {
            data.push(value);
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="StarterApp" ng-controller="AppCtrl" class="table table-responsive table-striped">
  <thead>
    <tr>
      <th class="text-center"><button type="button" ng-click="getChecked()"> Get checked </button></th>
      <th class="text-center">1st</th>
      <th class="text-center">2nd</th>
      <th class="text-center">3rd</th>
      <th class="text-center">4th</th>
      <th class="text-center">5th</th>
      <th class="text-center">6th</th>
      <th class="text-center">7th</th>
      <th class="text-center">8th</th>
      <th class="text-center">9th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        First header
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check1')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check2')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check3')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check1')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check2')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check3')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check1')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check2')"/>
      </td>
      <td class="text-center">
        <input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check3')"/>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

如果您需要控制器中的计数，那么我想您需要遍历复选框。如

$scope.attribute1Counter = 0;
angular.forEach($scope.myModel.myData, function(data){
    if(data.attribute1 === true){
       $scope.attribute1Counter++
    }
});

Answer 3

将 underscore.js 拉入您的项目并使用 _.where (http://underscorejs.org/#where) 获取控制器中的计数。