【问题标题】:Angular-material md-select with images or svg带有图像或 svg 的 Angular-material md-select
【发布时间】:2015-07-04 18:10:36
【问题描述】:

我正在使用角度材料,我想使用 md-select 但使用图像/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>

这里有一些截图:

【问题讨论】:

  • 所以你只想要图片?你能说清楚一点吗?
  • 第一张图还可以;这就是我想要的;问题出在第二张图片中:我还想在选择某些内容后查看该图像。希望现在更清楚了。
  • 大快朵颐。包括图片

标签: angularjs svg angular-material


【解决方案1】:

我在angular material github 中找到了一种使用 md-select 的好方法

Here 提供解决方案的 plunker,并在下方预览。

控制器:

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>

【讨论】:

    【解决方案2】:

    对于 Angular 2+,您可以在 &lt;mat-select&gt; 下方使用 &lt;mat-select-trigger&gt; 并将您选择的对象 &lt;img src="{{ selected.image }}"&gt; {{ selected.name }} 指向那里

    【讨论】:

      猜你喜欢
      • 2015-06-16
      • 1970-01-01
      • 1970-01-01
      • 2016-10-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-06
      • 1970-01-01
      相关资源
      最近更新 更多