Menu
I am trying to implement a select dropdown by using 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!
517
asked Jan 20 '26 16:01
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.
Below my HTML before the changes:
<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:
<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:
$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. These fields was in forms placed inside $mdDialog.
198
answered Jan 23 '26 06:01
Use <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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
