Question

我能够通过使用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';

});

工作：（在线元素上检查）

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

Answer 1

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

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

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

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

和

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

不显示使用md-select和md-option的Angular Material下拉列表

1 个答案: