CODEWITHSUNDEEP
angularjsangular-material
Damon
Damon

Reputation: 4484

How can I trigger a select from a button with Angular Material?

I have an <md-select> that displays a list of years. Great. When the screen reaches a certain width, i change the select to a <md-button>

I would like to listen to the button click and trigger the select to "open" for lack of better words. Or, is there a different method I should use?

Here is what I have - big surprise It's probably not what I should be doing. I understand this is a mobile framework - reasons beyond my control I am using it for my entire site. Thank you for any suggestions!

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

This is my component.js file:

'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
            }
        ];
    }
});

Upvotes: 2

Views: 5882

Answers (2)

Josh Rice
Josh Rice

Reputation: 81

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

So you can use a md-menu you then use md-icon to give it an image. The <button ng-click="$mdOpenMenu($event)"> will open the the menu. Use the md-menu-content with the md-menu-item with a ng-repeat to replicate a md-select. <md-button ng-click="vm.option = option"> will set the default option to the one just clicked

Upvotes: 0

isherwood
isherwood

Reputation: 61056

I'd probably use a menu, and set the select model to match. Any change in the menu should update the select, and vice-versa.

Upvotes: 3

Related Questions