2016-05-20 5 views
0

私はプロダクションでmd-selectでいくつかの問題を実験してPlunkrを使用しようとしています。 plunkrを作成すると、md-selectはアプリ内でのように見えません。私は間違って何をしていますか?Plunkrでmd-selectが動作しないのはなぜですか?

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> 

答えて

1

md-select NG-モデルが必要です。コンソールに$ compile:ctreqがあり、これは必要なコントローラがないことを示しています。私がそれを追加すると、エラーは消えましたが、ドロップダウンのオプションは空白でした。私は{{option}}をmd-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>

作業例です
関連する問題