CODEWITHSUNDEEP
javascriptangularjsangular-material
Sadique
Sadique

Reputation: 139

Angular Material UI md-select

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!

Upvotes: 3

Views: 7037

Answers (4)

rf987
rf987

Reputation: 21

To simplify Claudio's answer:

Add a variable in your controller you can use as a flag to show/hide the dialogs html template.

$scope.show_filters = false;

Then surround your dialog html template with a div that you can enable/disable like so:

<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

Upvotes: 2

Claudio Zanin
Claudio Zanin

Reputation: 31

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.

Upvotes: 3

Praveen Singh
Praveen Singh

Reputation: 2567

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>

Upvotes: 2

shashanka n
shashanka n

Reputation: 2598

According to the official docs You should be using md-select, not 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>

Upvotes: 0

Related Questions