Angular Material UI md-select
[英]Angular Material UI md-select
问题描述
I am trying to implement a select dropdown by using Angular Material UI. 
我试图通过使用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>
I have used the code above but, everytime I am getting this error : 我使用了上面的代码，但是，每次遇到此错误时：
Error: [$compile:ctreq] Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!
4 个解决方案
解决方案1
3 2016-03-22 20:59:32
I discovered an other solution described below. 我发现了下面描述的其他解决方案。
First I placed the HTML of the fields that was throwing the exceptions of Angular inside a NG-REPEAT code, and in JavaScript code of Angular I did a push inside the list when the interface was ready to be built. 首先，我将抛出Angular异常的字段的HTML放在NG-REPEAT代码中，在Angular的JavaScript代码中，当准备好构建接口时，我在列表内进行了推送。
Below my HTML before the changes: 在我的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 after changes: 更改后的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>
In JavaScript, before to fill the information in my models to present the options of my md-select I set my NG-REPEAT model with an empty Array, like this: 在JavaScript中，在将信息填充到模型中以显示md-select的选项之前，我将NG-REPEAT模型设置为空Array，如下所示：
$scope.controls = [];
After all data got ready to be presented, I just append a new item in my array with this command. 准备好要显示所有数据之后，我只需使用此命令在数组中添加一个新项。
$scope.controls = [{}];
I used this code in 3 places of my application and it worked fine. 我在应用程序的3个地方使用了此代码，并且效果很好。 These fields was in forms placed inside $mdDialog. 这些字段是放在$ mdDialog内的表单中的。
解决方案2
2 2015-07-29 17:03:15
Use <md-select> . 使用<md-select> 。 See this code snippet: 请参见以下代码段：
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
1 2018-01-31 19:50:39
To simplify Claudio's answer: 为了简化Claudio的答案：
Add a variable in your controller you can use as a flag to show/hide the dialogs html template. 在控制器中添加变量，您可以将其用作标记来显示/隐藏对话框html模板。
$scope.show_filters = false;
Then surround your dialog html template with a div that you can enable/disable like so: 然后在对话框HTML模板周围加上一个div，您可以启用/禁用它，如下所示：
<div ng-if="show_filters">
//your dialog template html goes here
</div>
Then, in your controller, whenever you want to open the dialog, do it like so: 然后，在您的控制器中，每当您要打开对话框时，都可以这样操作：
$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
});
};
This circumvents the bug in md-select 这样可以避免md-select中的错误
解决方案4
0 2015-07-29 16:59:40
According to the official docs You should be using md-select , not md-select-menu . 根据官方文档，您应该使用md-select ，而不是md-select-menu 。 Rewrite it as follows: 如下重写：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.