如何計算選中的複選框（不在項目組中）

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個屬性））

現在......我都數不過來：

• 多少attributes1（與全myModel.MyData [1到N]）被選中
• 多少屬性2（與整個myModel.MyData [1到N]）被選中
• 等等...

我現在所得到的，我可以accces的值，方法是：{{myModel.myData [1] .attribute1}} 但它返回我真/假（這很好） - 但在控制器中無法訪問到這一點。 （我的控制器js文件幾乎是清晰的，所以我不把它放在這裏）

如果some1可以幫助我，我可以在哪裏搜索解決方案我會很感激。

Answer 1

看看這個：

點擊複選框時，此要求與該數據填充陣列功能。在使用長度獲得數組長度後。

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

將underscore.js拉到您的項目中並使用_.where（http://underscorejs.org/#where）來獲取控制器中的計數。

Answer 3

如果你需要在你的控制器計數，那麼我想你需要通過複選框。作爲

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