

以下のようにangularJSのサンプルプログラムに、MDLをマウントして書きました。

include.html:

[code]

    <DOCUTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8" />
    <title>Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-message-format.min.js"></script>
    <script src="js/include.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-cookies.min.js"></script>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    </head>
     <body ng-controller="MyController as my">
     <form class="mdl-layout__content">
     <label class="mdl-typography--font-regular" for="temp">テンプレート：</label>
    <select class="mdl-menu" id="temp" name="temp" ng-model="my.template" ng-options="t.url as t.title for t in my.templates">
    <option  value="">
     以下から選択してください。
    </option>
    </select>
    <div class="mdl-card mdl-cell mdl-cell--12-col" ng-include="my.template" onload="my.onload()"></div>
    </form>
    </body>
    </html>
    
[/code]

include.js:

[code]

    angular.module('myApp', [])
    .controller('MyController', function() {
      this.templates = [
           //テンプレート情報（オプションラベルと読み込み先URL）
           { title: 'execution', url: 'templates/execution.html' },
           { title: 'tempo', url: 'templates/tempo.html' }
          ];
          //テンプレートを読み込んだ際に実行されるコード
          this.onload = function() {
            console.log(this.template);
          };
    });
    
[/code]

tempo.html:

[code]

    <dl>
     <dt>アッチェレランド</dt>
     <dd>だんだんはやく</dd>
     <dt>リタルダンド</dt>
     <dd>だんだんおそく</dd>
     <dt>ピュウ モッソ</dt>
     <dd>今までよりもはやく</dd>
     <dt>テンポ ルバート</dt>
     <dd>はやさを柔軟に伸縮させて</dd>
    </dl>
    
[/code]

execution.html:

[code]

     <dl>
      <dt>マルカート</dt>
      <dd>ひとつひとつの音をはっきりと演奏する</dd>
      <dt>ストリンジェンド</dt>
      <dd>だんだんせきこんで</dd>
      <dt>レガート</dt>
      <dd>音の間を切れ目なくなめらかに演奏する</dd>
      <dt>トレモロ</dt>
      <dd>急速に反復して演奏する</dd>
     </dl>
    
[/code]

include.htmlのように、selectにclass="mdl-
menu"等と書いてしまうと、表示が消えてしまいます。そのため、MaterialDesignで指定されているような動きを持ったSELECTBOXを作れなくて困っています。デモでは

demo.html

[code]

            <a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown">
              For Developers
              <i class="material-icons">arrow_drop_up</i>
            </a>
            <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="developers-dropdown">
              <li class="mdl-menu__item">App developer resources</li>
              <li class="mdl-menu__item">Android Open Source Project</li>
              <li class="mdl-menu__item">Android SDK</li>
              <li class="mdl-menu__item">Android for Work</li>
            </ul>
    
[/code]

と記載しており、動いております。（動き的にはこれは左下から右上に動きますが、実際にはプルダウンさせたいので、左上から右下や上から下にrippleさせたいなと思っています）

MaterialDesignではMenuの項目で以下のリンクのような説明をしており、何かしら方法があると思っています。

<https://www.google.com/design/spec/components/menus.html#menus-simple-menus>

MaterialDesignLiteのMenuでは以下のリンクのように説明しています。

<http://www.getmdl.io/components/index.html#menus-section>


CC BY-SA 3.0
2015-09-19T14:22:04.993
16774
2015-09-22T06:06:26.467
2015-09-19T14:43:16.800
question
angularjs material-design
<select>にMaterialDesignLiteのmdl-menu classを指定するとselectが消えてしまう。


angular-material というプロジェクトがありました。

<https://material.angularjs.org/latest/#/api/material.components.autocomplete/directive/mdAutocomplete>


CC BY-SA 3.0
2015-09-22T06:06:26.467
16840
2015-09-22T06:06:26.467
16774
answer