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

material angular checkbox bind custom input checkbox

本文关键字：复选框 绑定 输入 自定义      更新时间：2023-09-26

我使用这种很棒的角度材料，现在我想做的是，当角度复选框1被点击时，所有类别为"column_1"的输入复选框都将被选中，与角度复选框2和3相同，单击其中的任何一个，然后将选中为所单击的角度复选框绑定的相应输入复选框。例如，如果单击复选框x2，则将选中所有类别为"column_2"的输入复选框，单击复选框x3，则将检查所有类为"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
    };
});

这里有一个查找您想要的行为的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>

您可以将"[1，2，3]"替换为任何其他计数器。

我的js"checkColumnCheckBoxes"函数：

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

我敢肯定，你将不得不根据你的"真实"需求重新设计它(因为你不需要一个只显示复选框的表(，但这可能是一个坚实的开始。如果你需要一些帮助来适应你的需求，请随时询问。

希望它能有所帮助。

由于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以匹配示例。

相关文章：