CODEWITHSUNDEEP
javascriptangularjsangular-materialmd-select
Umer Farooq
Umer Farooq

Reputation: 7486

Checkbox not showing up in md-select multiple

I am trying to enable multi select in my md-select. I have hardcoded multiple to true but md-select isn't showing checkbox besides the value in the drop down list.

I am using AngularJS 1.4.8 and AngularMaterial 1.0.0.

Code:

<div style="background: #f7f7f7" ng-controller="CircleTimeActivityPageController">

            <md-input-container flex="30">
                     <md-select multiple="true" placeholder="Observations" ng-model="myData">
                          <md-option ng-value="selectedObservation" ng-repeat="selectedObservation in observations">
                                    {{ selectedObservation }}</md-option>
                     </md-select>
            </md-input-container>

 </div>

mainApp.controller('CircleTimeActivityPageController', function($scope, $http, $mdToast, $log) {
    $scope.observations = [1.3, 1.2, 1.1];
});

enter image description here

Please excuse my ignorance in AngularJS and AngularMaterial.

EDIT:

CODEPEN Example: https://codepen.io/wingoku/pen/ZLYxNY

Best Regards

Upvotes: 0

Views: 2632

Answers (2)

troig
troig

Reputation: 7212

I think it's just a version issue. If you upgrade angular-material version to the latest 1.1.1, your problem will be fixed, as you can see in this working plunker.

...
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.js"></script>
...

Hope it helps

Upvotes: 2

Fissio
Fissio

Reputation: 3758

Angular-material 1.0 doesn't display checkboxes in select multiple dropdowns - instead, the color of the selected elements changes. In your codepen example it's difficult to see since the theme color is so close to the default, unselected black - check out the same example with a pink theme instead and you'll see it's much easier to see. The functionality should be there regardless of checkboxes.

If you want to have the checkboxes, you'll need to use a newer version of angular-material - for example the 1.1.0 version has those.

Upvotes: 0

Related Questions