CODEWITHSUNDEEP
javascriptangularjs
Juliver Galleto
Juliver Galleto

Reputation: 9047

material angular checkbox bind custom input checkbox

Im using this awesome angular material, now what im trying to do is when the angular checkbox 1 is click then all the input checkbox that has a class of "column_1" will be check, same as the angular checkbox 2 and 3, clicking in any of them will then checked the corresponding input checkbox that was bind for the clicked angular checkbox e.g if click checkbox2 then all the input checkbox that has a class of "column_2" will be check, click checkbox3 then all the input checkbox that has a class of "column_3" will be check. Any help, clues, ideas, recommendation and suggestion to achieve it?

here's my 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>

and my script (module and controller)

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

Upvotes: 0

Views: 2031

Answers (1)

Okazari
Okazari

Reputation: 4597

Here is a plunker that looks to the behavior you want :

I basically dynamically created the checkboxes to have a better control on it.

<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>

You can replace "[1,2,3]" with any other counter.

My js "checkColumnCheckBoxes" function :

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

I'm pretty sure you will have to rework this to your "real" needs (as you don't need a table that display only checkboxes) but it could be a solid start. If you need some help to adapt it to your needs feel free to ask.

Hope it helped.

Since your HTML is pre-generated here is how it should look like :

 <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>

I also updated the plunker to match the exemple.

Upvotes: 0

Related Questions