Search code examples
angularjsangular-materialplunker

Why isn't md-select working in my Plunkr?


I am trying to use Plunkr to do some experimenting with some issues I am having with md-selects in my production app. When I create the plunkr, the md-select looks nothing like what it looks like in the app. What am I doing wrong?

Plunkr

<head>

    <!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">

  </head>
  <body ng-app=YourApp>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>

    <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

  <script>

        // Include app dependency on ngMaterial

        angular.module( 'YourApp', ['ngMaterial'] )
            .controller("YourController", function($scope){
              $scope.options = ['1', '2', '3'];
            } );

    </script>


    <div ng-controller="YourController">
      <md-input-container>
        <md-select>
          <md-option ng-repeat="option in options">
            {{option}}
          </md-option>
        </md-select>
      </md-input-container>

    </div>

  </body>

Solution

  • md-select requires an ng-model. You'll notice in the console there's a $compile:ctreq which is indicating that a required controller is missing. Once I added that, the errors went away but the options in the drop down were blank. I added a {{option}} in the md-option element and everything is happy.

    Here's a working example

    <!DOCTYPE html>
    <html>
      <head>
    
        <!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
    
      </head>
      <body ng-app=YourApp>
    
        <!-- Angular Material Dependencies -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    
        <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
    
      <script>
    
            // Include app dependency on ngMaterial
    
            angular.module( 'YourApp', ['ngMaterial'] )
                .controller("YourController", function($scope){
                  $scope.options = ['1', '2', '3'];
                } );
    
        </script>
    
    
        <div ng-controller="YourController">
          <md-input-container>
            <md-select ng-model="myModel">
              <md-option ng-repeat="option in options">
                {{option}}
              </md-option>
            </md-select>
          </md-input-container>
    
        </div>
    
      </body>
    
    </html>