CODEWITHSUNDEEP
javascripthtmlangularjsmaterial-designangular-material
Mad-D
Mad-D

Reputation: 4669

Angular Material dropdown using md-select and md-option doesn't display

I was able to successfully create dropdown picker by designing stand-alone page using md-select/md-option as mentioned below, However when i use this in my app it throws an error and I don't see dropdown but just the label.

html Page:

<form name="pForm" ng-app="myApp" ng-controller="pController" class="container-fluid" ng-true-value="1" ng-false-value="0" aria-label="ShowHideAccountant">  
        <div class="col-xs-12">
        <label>Area Picker :  </label>
            <md-select ng-model="widgetType" >
            <md-option ng-value="t.title" data-ng-repeat="t in widget">{{ t.title }}</md-option>
            </md-select>

        <label>Business Impact :  </label>
            <md-select ng-model="businessImpactType" >
            <md-option ng-value="option.name" data-ng-repeat="option in businessImpact">{{option.name}}</md-option>
            </md-select>   
        </div>   
</form>

javascript:

myApp.controller('pController', function($scope) {
  $scope.widget = [{
    "id": "line",
    "title": "Line"
  }, {
    "id": "spline",
    "title": "Smooth line"
  }, {
    "id": "area",
    "title": "Area"
  }, {
    "id": "areaspline",
    "title": "Smooth area"
  }];

  //init
  $scope.widgetType = 'Line';

$scope.businessImpactType = 'CAMERA';

});

working: (inspected on Line element ) 

<md-select data-brackets-id="789" ng-model="widgetType" class="ng-pristine ng-untouched ng-valid md-default-theme" tabindex="0" role="combobox" id="select_003" aria-haspopup="true" aria-expanded="false" aria-labelledby="select_label_001" aria-invalid="false">
    <md-select-label class="md-select-label " id="select_label_001">
        <span class="ng-binding">Line</span>
        <span class="md-select-icon" aria-hidden="true">
        </span>
    </md-select-label>
</md-select>

enter image description here

non-working / error:
When i use the same code in my existing app the console throws an error and i don't see dropdown option.

enter image description here

    ARIA: Attribute " aria-label ", required for accessibility, is missing on node: 
<md-select ng-model="widgetType" class="ng-pristine ng-untouched ng-valid" tabindex="0" aria-disabled="false" role="combobox" aria-expanded="false" id="select_3" aria-invalid="false">
    <md-select-value class="md-select-value md-select-placeholder" id="select_value_label_0">
        <span></span>
        <span class="md-select-icon" aria-hidden="true"></span>
    </md-select-value>
</md-select>

Upvotes: 2

Views: 5948

Answers (1)

mrk m
mrk m

Reputation: 155

You should have a collection named businessImpact in your controller to make your code work.

As far as the error you said, its a Warning! and not an error. This should not bother. It is about setting an attribute called aria-label on md-select node.

I have created working fiddle here: https://jsfiddle.net/mrk_m/vkuvyxjc/5/

To get more info about warning see this How do I disable ngAria in ngMaterial? .

and

https://github.com/angular/material/issues/3441

Upvotes: 1

Related Questions