CODEWITHSUNDEEP
angularjssvgangular-material
heckmac
heckmac

Reputation: 243

Angular-material md-select with images or svg

I am using angular material, I want to use md-select but with images/svg; I am using md-option together with ng-repeat and the list of options works, but when I select something I see the text.

Is it feasible?

Thanks

<md-select ng-model="mkt.bookmaker" placeholder="Select a bookmaker">
  <md-option ng-value="opt" ng-repeat="opt in mkt.selected.matchInfo.bookmakers">
    <md-icon md-svg-src="{{ opt.logo }}"></md-icon>{{ opt.name }}
  </md-option>
</md-select>

Here some screenshots: enter image description here enter image description here

Upvotes: 3

Views: 10585

Answers (2)

Yevheniy Potupa
Yevheniy Potupa

Reputation: 567

For Angular 2+ you can use <mat-select-trigger> just below <mat-select> and path there your selected object <img src="{{ selected.image }}"> {{ selected.name }}

Upvotes: 3

heckmac
heckmac

Reputation: 243

I found a nice way to use the md-select in angular material github

Here the plunker with the solution, and below a preview.

Controller:

var app = angular.module('DemoApp', ['ngMaterial']);

app.controller('MainCtrl', function($scope) {

    $scope.options = [
      {
        name: 'Rome',
        size: '200€',
        image: 'http://lorempixel.com/120/60/cats/'
      },
      {
        name: 'Naples',
        size: '230€',
        image: 'http://lorempixel.com/120/60/food/'
      }
      ];

      $scope.currOption =   $scope.options[1];

      $scope.updateData = function(){
        $scope.options = [
          {
            name: 'London',
            size: '400€',
            image: 'http://lorempixel.com/60/60/abstract/'
          },
          {
            name: 'Paris',
            size: '900€',
            image: 'http://lorempixel.com/60/60/nature/'
          },
          {
            name: 'Rome',
            size: '200€',
            image: 'http://lorempixel.com/60/60/sport/'
          },
          {
            name: 'Naples',
            size: '230€',
            image: 'http://lorempixel.com/60/60'
          }
          ];

          $scope.currOption =   $scope.options[1];
      }

});

My Html:

    <md-select data-ng-model="currOption">
      <md-select-label><img src="{{ currOption.image }}" /></md-select-label>
        <md-option data-ng-value="opt" data-ng-repeat="opt in options"><img src="{{ opt.image }}" /></md-option>
    </md-select>

Upvotes: 10

Related Questions