Question

我有一个显示年份列表的<md-select>。大。当屏幕达到一定宽度时，我将选择更改为<md-button>

我想听按钮点击并触发选择＆＃34;打开＆＃34;缺乏更好的词汇。或者，我应该使用不同的方法吗？

这就是我所拥有的 - 大惊喜它可能不是我应该做的。我知道这是一个移动框架 - 我无法控制的原因我将它用于我的整个网站。谢谢你的任何建议！

<!-- Mobile year begin -->
<md-input-container hide show-xs>
    <md-button aria-label="Select a year" class="md-icon-button" ng-click="">
        <i class="material-icons">date_range</i>
    </md-button>
</md-input-container>
<!-- Mobile year end -->

<!-- Desktop year begin -->
<md-input-container hide show-gt-xs>
    <label>Year</label>
    <md-select ng-model="myModel" class="md-no-underline md-body-1">
        <md-option ng-repeat="option in $ctrl.myYears" ng-value="option.year">
            {{ option.year }}
        </md-option>
    </md-select>
</md-input-container>
<!-- Desktop year end -->

这是我的component.js文件：

'use strict';

angular.module('year')
    .component('year', {
        templateUrl: 'path/to/template/my-template.template.html',
        controller: function myController() {
            /**
             * Year data.
             *
             * @type {*[]}
             */
            this.years = [
            {
                year: 2017
            },
            {
                year: 2016
            },
            {
                year: 2015
            },
            {
                year: 2014
            },
            {
                year: 2013
            }
        ];
    }
});

Answer 1

我可能会使用menu，并将select模型设置为匹配。菜单中的任何更改都应更新选择，反之亦然。

Answer 2

 <md-menu>
    <button ng-click="$mdOpenMenu($event)">
      <md-icon>history</md-icon>
    </button>
    <md-menu-content width="4">
      <md-menu-item ng-repeat="option in $ctrl.myYears" >
        <md-button ng-click="vm.option = option">
          {{option.year }}
        </md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

因此，您可以使用md菜单，然后使用md-icon为其提供图像。 <button ng-click="$mdOpenMenu($event)">将打开菜单。将md-menu-content与带有ng-repeat的md-menu-item一起使用以复制md-select。 <md-button ng-click="vm.option = option">会将默认选项设置为刚刚单击的那个

如何从带有角度材质的按钮触发选择？

2 个答案: