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个属性））< / p>

现在......我必须要数：

选择了多少个属性1（整个myModel.MyData [1到N]）
选择了多少个属性2（包含整个myModel.MyData [1到N]）
依旧......

我现在所有，我可以通过以下方式获得价值：{{myModel.myData [1] .attribute1}} 但它返回true / false（很好） - 但无法在控制器中访问它。（我的控制器js文件几乎是清楚的，所以我不把它放在这里）

如果some1可以帮助我，我可以搜索解决方案，我会感激不尽。

Answer 1

如果您需要控制器中的计数，那么我猜您需要通过复选框。如在

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

Answer 2

看看这个：

当单击复选框时，这将调用具有此数据的填充数组的函数。你可以使用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 3

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

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

3 个答案: