angularjs - Angular-material md-select with images or svg -
i using angular material, want use md-select images/svg; using md-option ng-repeat , list of options works, when select see text.
is feasible?
thanks
<md-select ng-model="mkt.bookmaker" placeholder="select 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 screenshots:
i found nice way use md-select in angular material github
here plunker solution, , below 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>
Comments
Post a Comment