为什么 md-select 在我的 Plunker 中不起作用？

Question

我正在尝试使用 Plunkr 对我在生产应用程序中使用 md-selects 时遇到的一些问题进行一些试验。当我创建 plunkr 时，md-select 看起来与它在应用程序中的样子完全不同。我做错了什么？

<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>

Answer 1

md-select 需要一个 ng 模型。您会注意到在控制台中有一个 $compile:ctreq 指示缺少所需的控制器。一旦我添加了它，错误就消失了，但下拉列表中的选项是空白的。我在 md-option 元素中添加了一个 {{option}} 并且一切正常。

这是一个工作示例

<!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>

为什么 md-select 在我的 Plunker 中不起作用？

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

angularjs

plunker

angular-material