CODEWITHSUNDEEP
angularjsangular-material
dman
dman

Reputation: 11064

Angular Material's md-checkbox - all checkboxes check when using ng-model.

The radio choice, styled as a checkbox, works great like this with no issues:

  <div ng-repeat="choice in regions| orderBy: 'description'">
    <input type="radio"
      value="{{choice.name}}"
      name="regionRadio"
      ng-model="radio.region">
    {{choice.description}}
  </div>

input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox; 
  -ms-appearance: checkbox;  
}

However, if I want to use Angular Materials md-checkbox:

  <div ng-repeat="choice in regions| orderBy: 'description'">
    <md-checkbox type="radio"
      value="{{choice.name}}"
      ng-model="radio.region">
    {{choice.description}}
    </md-checkbox>
  </div>

It does not handle the ng-model well. When just one checkbox is selected, all the checkboxes become selected(checked).

Any suggestions how to make md-checkbox work in the same manner with ng-model as before?

Upvotes: 1

Views: 1928

Answers (2)

Steve Hynding
Steve Hynding

Reputation: 1859

I'll take a shot in the dark and assume you had the same (or very similar) issue as me. I was stunned to search and find this issue was unique to you and me until I started to look into my parent containers and realized my mistake.

My issue was that I included my md-checkbox INSIDE an md-list-item. Upon clicking anywhere in that md-list-item, my md-checkbox toggled. In retrospect, I should have noticed sooner with the giveaway ripple effect.

The md-checkbox directive is one of the proxied elements that gets triggered when clicking inside an md-list-item. Adding the class "md-no-proxy" to the md-list-item element removes this (and the ripple) effect.*

If you were not using a parent md-list-item element, I suggest looking into whether or not any of your parent containers/directives proxies an ng-click in it's children elements.

*Source: https://material.angularjs.org/latest/api/directive/mdListItem

Upvotes: 1

camden_kid
camden_kid

Reputation: 12813

Your question is a bit confusing. md-checkbox does not have the attribute type according to the docs. You should really use md-radio-group to stay within AM best practice.

I have created an example with md-checkbox and md-radio-group - CodePen

Clicking a checkbox does not select all the checkboxes but you can select more than one checkbox. It's quite easy to write some code to make the checkboxes act like radio buttons though.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <p>Checkbox</p>
  <div ng-repeat="choice in regions| orderBy: 'description'">
    <md-checkbox type="radio"
                 value="{{choice.name}}"
                 ng-model="radio.region">
      {{choice.description}}
    </md-checkbox>
  </div>
  <p>{{radio.region}}</p>

  <p>Radio Group</p>
  <md-radio-group ng-model="newradio.region">
    <md-radio-button ng-repeat="choice in regions| orderBy: 'description'" value="{{choice.name}}" class="md-primary">{{choice.description}}</md-radio-button>
  </md-radio-group>
  <p>{{newradio.region}}</p>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function($scope) {
  $scope.regions = [
    {name: "sky", description: "The sky"},
    {name: "sea", description: "The sea"},
    {name: "land", description: "The land"},
    {name: "water", description: "The water"}
  ];
});

Upvotes: 1

Related Questions