Question

我正在使用这个真棒angular material，现在我想要做的是当单击角度复选框1时，将检查具有类“column_1”的所有输入复选框，与角度复选框2相同然后单击其中任何一个将检查相应的输入复选框，该复选框为单击的角度复选框绑定，例如，如果单击复选框2，则将检查具有“column_2”类的所有输入复选框，单击复选框3然后输入所有输入将检查具有“column_3”类的复选框。有任何帮助，线索，想法，建议和建议来实现它吗？

这是我的HTML

<div ng-app="j_app">
  <div ng-controller="j_controller">
    <md-checkbox ng-model="check">
    </md-checkbox>

    <table>
        <thead>
            <th><md-checkbox class="checkbox1"></md-checkbox></th>
            <th><md-checkbox class="checkbox2"></md-checkbox></th>
            <th><md-checkbox class="checkbox3"></md-checkbox></th>
        </thead>
        <tbody>
            <tr class="row_1">
                <td class="column_1"><md-checkbox></md-checkbox></td>
                <td class="column_2"><md-checkbox></md-checkbox></td>
                <td class="column_3"><md-checkbox></md-checkbox></td>
            </tr>
            <tr class="row_2">
                <td class="column_1"><md-checkbox></md-checkbox></td>
                <td class="column_2"><md-checkbox></md-checkbox></td>
                <td class="column_3"><md-checkbox></md-checkbox></td>
            </tr>
    </table>
  </div>
</div>

和我的脚本（模块和控制器）

var app = angular.module('j_app', ['ngMaterial']);
app.controller('j_controller', function($scope) {
    $scope.check = {
      value1 : true,
      value2 : false
    };
});

Answer 1

Here is a plunker查看您想要的行为：

我基本上动态创建了复选框，以便更好地控制它。

<th ng-repeat="(column,columnindex) in [1,2,3]">
    <md-checkbox ng-change="checkColumnCheckBoxes(columnindex,checkBoxesHeader[columnindex])" 
                 ng-model="checkBoxesHeader[columnindex]" class="checkbox1">
    </md-checkbox>
</th>

<tr class="row_{{$index}}" ng-repeat="(row,rowindex) in [1,2,3]">
    <td class="column_{{$index}}" 
        ng-repeat="(column,columnindex) in [1,2,3]">
        <md-checkbox ng-init="checkBoxes[rowindex][columnindex] = false" 
                     ng-model="checkBoxes[rowindex][columnindex]">
        </md-checkbox>
    </td>
</tr>

您可以替换＆＃34; [1,2,3]＆＃34;与任何其他柜台。

我的js＆＃34; checkColumnCheckBoxes＆＃34;功能：

$scope.checkColumnCheckBoxes = function(index,value){
  angular.forEach($scope.checkBoxes, function(checkBox,key){
    $scope.checkBoxes[key][index] = value;
  })
}

我很确定你必须将此修改给你的真实＆＃34;需要（因为你不需要只显示复选框的表格）但它可能是一个坚实的开始。如果您需要一些帮助以使其适应您的需求，请随时提出。

希望它有所帮助。

由于您的HTML是预先生成的，因此它应该是这样的：

 <table>
    <thead>
        <th><md-checkbox ng-change="checkColumnCheckBoxes(0,checkBoxesHeader[0])" class="checkbox1" ng-model="checkBoxesHeader[0]"></md-checkbox></th>
        <th><md-checkbox ng-change="checkColumnCheckBoxes(1,checkBoxesHeader[1])" class="checkbox2" ng-model="checkBoxesHeader[1]"></md-checkbox></th>
        <th><md-checkbox ng-change="checkColumnCheckBoxes(2,checkBoxesHeader[2])" class="checkbox3" ng-model="checkBoxesHeader[2]"></md-checkbox></th>

    <tbody>
        <tr class="row_1">
            <td class="column_1"><md-checkbox ng-init="checkBoxes[0][0] = false" ng-model="checkBoxes[0][0]"></md-checkbox></td>
            <td class="column_1"><md-checkbox ng-init="checkBoxes[1][0] = false" ng-model="checkBoxes[0][1]"></md-checkbox></td>
            <td class="column_1"><md-checkbox ng-init="checkBoxes[2][0] = false" ng-model="checkBoxes[0][2]"></md-checkbox></td>
          </tr>
        <tr class="row_2">
            <td class="column_1"><md-checkbox ng-init="checkBoxes[0][1] = false" ng-model="checkBoxes[1][0]"></md-checkbox></td>
            <td class="column_1"><md-checkbox ng-init="checkBoxes[1][1] = false" ng-model="checkBoxes[1][1]"></md-checkbox></td>
            <td class="column_1"><md-checkbox ng-init="checkBoxes[2][1] = false" ng-model="checkBoxes[1][2]"></md-checkbox></td>
          </tr>
</table>

我还更新了plunker以匹配例子。

材料角度复选框绑定自定义输入复选

1 个答案: