material angular checkbox bind custom input checkbox

Question

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
    };
});

Okazari · Accepted Answer · 2015-07-29 15:07:59Z

0

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.

edited Jul 29, 2015 at 15:07

answered Jul 29, 2015 at 10:12

Okazari

4,5971 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Juliver Galleto Over a year ago

nice, but my checkboxes was created from the back-end (loop stuffs) and not through angular loop stuff. Can you show me how its done using custom stuff like not using ng-repeat? (see my reference html)

Okazari Over a year ago

@CodeDemon you will probably have to add to you back-end some stuff that angular would have generate dynamically. I really think this is a miss-used of angular to use it in pair with a back-end generating some HTML. In my opinion angular should get the object with HTTP calls to the back-end and manage the whole view by itself. Will build you an exemple according to your needs (without ng-repeat)

Juliver Galleto Over a year ago

thank you, anyways, i tried different approach base from your answer and seems working good so far. How can I make the md-checkbox checked by default? I can surely use ng-model and bind it with a scope (true or false) in the controller but that seems also change the other md-checkbox to checked due to having the same model. Any ideas please?

Okazari Over a year ago

@CodeDemon In the ng-init, put the default value you want for the checkbox (instead of false)

Juliver Galleto Over a year ago

i tried ng-init="data.cb1" and in the controller, i put $scope.data.cb1 = true; but sadly not working, any ideas?

|

Collectives™ on Stack Overflow

material angular checkbox bind custom input checkbox

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related