md-select选项不适用于md-menu?

时间:2017-06-29 15:02:48

标签: css angularjs angular-material

我遇到md-options隐藏在md菜单后面的问题 - 我在'子菜单'中使用md-select(见下图):

md-select options behind md-menu

有人询问here,答案是md-select在md-menu中不支持,但我想知道是否有人找到了解决方法?在我的情况下,我在每个子菜单中都有一个不同的复选框/选择选项的下拉菜单,所以使用像md-chips这样的东西真的可以成为我想要实现的目标。

HTML

<md-menu>
      <md-button ng-click="$mdOpenMenu()">open menu</md-button>
      <md-menu-content>
        <md-menu-item>
          <md-menu>
            <md-button ng-click="$mdOpenMenu()">First ></md-button>
            <md-menu-content>
              <md-menu-item>
                option 1
               </md-menu-item>
               <md-menu-item>
                option 2
               </md-menu-item>
               <md-menu-item>
                option 3
               </md-menu-item>
                        </md-menu-content>
          </md-menu>
        </md-menu-item>

        <md-menu-item>
          <md-menu>
            <md-button ng-click="$mdOpenMenu()">Second ></md-button>
            <md-menu-content>
              <md-input-container>
                <md-select placeholder="Select an option..." ng-model="optionChosen">
                  <md-option ng-repeat="option in options" ng-value="option">
                                            {{option}}
                                        </md-option>
                </md-select>
              </md-input-container>
            </md-menu-content>
          </md-menu>
        </md-menu-item>
      </md-menu-content>
    </md-menu>

的JavaScript

app.controller('MainCtrl', function($scope) {
  $scope.options = [
    'option one',
    'option two',
    'options three'
  ];

  $scope.optionChosen = null;
});

工作代码:Plunkr

0 个答案:

没有答案