我正在使用角形材质,我想使用md-select但要使用images / svg;我将md-option和ng-repeat一起使用,并且选项列表有效,但是当我选择某些内容时,会看到文本。
可行吗
谢谢
<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>
这里有一些截图:
我找到了一种在角材料github中使用md-select的好方法
这里是带有解决方案的插件,下面是预览。
控制器:
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];
}
});
我的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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句