使用 md-select 和 md-option 的 Angular Material 下拉菜单不显示答案

【问题标题】：Angular Material dropdown using md-select and md-option doesn't display使用 md-select 和 md-option 的 Angular Material 下拉菜单不显示
【发布时间】：2016-06-29 00:23:52
【问题描述】：

我能够通过使用 md-select/md-option 设计独立页面来成功创建下拉选择器，如下所述，但是当我在我的应用程序中使用它时，它会引发错误，我看不到下拉菜单，而只是标签。

html页面：

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

});

工作：（在 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>

不工作/错误：
当我在现有应用程序中使用相同的代码时，控制台会引发错误并且我看不到下拉选项。

    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>

【问题讨论】：

.. 如果您发布您收到的错误，它可能会很有用！
@slackmart：非工作/错误部分有错误详细信息。
第一个下拉菜单工作正常，而第二个下拉菜单使用字符串，因此它不会显示任何选项，因为没有可用的选项。

标签： javascript html angularjs material-design angular-material

【解决方案1】：

您的controller 中应该有一个名为businessImpact 的集合，以使您的代码正常工作。

就您所说的错误而言，它是一个警告！而不是错误。这不应该打扰。它是关于在md-select 节点上设置一个名为aria-label 的属性。

我在这里创建了工作小提琴：https://jsfiddle.net/mrk_m/vkuvyxjc/5/

要获取有关警告的更多信息，请参阅How do I disable ngAria in ngMaterial?。

和

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

【讨论】：