Angular Material UI md-select答案

【问题标题】：Angular Material UI md-selectAngular Material UI md-select
【发布时间】：2015-07-29 16:34:31
【问题描述】：

我正在尝试使用 Angular Material UI 实现选择下拉菜单。

<md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
    <md-option value="one">One</md-option>
    <md-option value="two">Two</md-option>
    <md-option value="three">Three</md-option>
    <md-option value="four">Four</md-option>
    <md-option value="five">Five</md-option>
</md-select>

我已经使用了上面的代码，但是每次我得到这个错误：

错误：[$compile:ctreq] 控制器“mdSelectMenu”，指令“mdOption”需要，找不到！

【问题讨论】：

不是 md-select 而不是 md-select-menu 吗？见material.angularjs.org/latest/#/demo/material.components.select

标签： javascript angularjs angular-material

【解决方案1】：

我发现了下面描述的另一个解决方案。

首先，我将抛出 Angular 异常的字段的 HTML 放在 NG-REPEAT 代码中，然后在 Angular 的 JavaScript 代码中，当界面准备好构建时，我在列表中进行了推送。

在更改前的 HTML 下方：

<div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
    <label>Field Name</label>
    <md-select ng-model="service.selectedChart.serieField">
        <md-option ng-repeat="column in columns" ng-value="column.columnName">
            {{column.columnName}}
        </md-option>
    </md-select>
</md-input-container>
</div>

修改后的 HTML：

<div ng-repeat="control in controls">
<div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
    <label>Field Name</label>
    <md-select ng-model="service.selectedChart.serieField">
        <md-option ng-repeat="column in columns" ng-value="column.columnName">
            {{column.columnName}}
        </md-option>
    </md-select>
</md-input-container>
</div>
</div>

在 JavaScript 中，在我的模型中填充信息以显示我的 md-select 的选项之前，我将我的 NG-REPEAT 模型设置为一个空数组，如下所示：

$scope.controls = [];

在所有数据准备好呈现后，我只需使用此命令在我的数组中添加一个新项目。

$scope.controls = [{}];

我在我的应用程序的 3 个地方使用了这段代码，它运行良好。这些字段位于 $mdDialog 中的表单中。

【讨论】：

【解决方案2】：

使用<md-select>。看这段代码sn-p：

angular.module('materialApp', ['ngMaterial', 'ngAnimate'])

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

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<body ng-app="materialApp">
  <md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
    <md-option value="one">One</md-option>
    <md-option value="two">Two</md-option>
    <md-option value="three">Three</md-option>
    <md-option value="four">Four</md-option>
    <md-option value="five">Five</md-option>
  </md-select>
</body>

【讨论】：

【解决方案3】：

为了简化克劳迪奥的回答：

在您的控制器中添加一个变量，您可以将其用作显示/隐藏对话框 html 模板的标志。

$scope.show_filters = false;

然后用一个 div 包围你的对话框 html 模板，你可以像这样启用/禁用它：

<div ng-if="show_filters">
    //your dialog template html goes here
</div>

然后，在您的控制器中，只要您想打开对话框，就这样做：

    $scope.show_filter_dialog = function() {
        $scope.show_filters = true; //we enable the div right before we show the dialog

        $mdDialog.show({
            scope: $scope, 
            preserveScope: true,
            bindToController: true,
            templateUrl: 'views/filters.html',
            parent: angular.element(document.body),
            clickOutsideToClose: true
        }).finally(function() {
            $scope.show_filters = false; //we disable it when the dialog is closed
        });
    };

这绕过了 md-select 中的错误

【讨论】：

【解决方案4】：

根据官方docs，您应该使用md-select，而不是md-select-menu。改写如下：

<md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
    <md-option value="one">One</md-option>
    <md-option value="two">Two</md-option>
    <md-option value="three">Three</md-option>
    <md-option value="four">Four</md-option>
    <md-option value="five">Five</md-option>
</md-select>

【讨论】：

好的，我上面的答案有 2 票赞成建议 md-select，而我有 1 票反对？至少证明你投反对票的理由！