angularjs - 如何在 md-option 中添加 md-icon？

Question

我是angularJS的新手，谁能回答我如何在md-option中添加md-icon？

我试过<md-option>ABC <md-icon>delete</md-icon></md-option>了，但选择时会给出这样的输出

“ABC删除”

这个有什么解决办法吗？？

Answer 1

就像任何其他子元素一样

<md-option ng-repeat="size in size" value="{{size}}">

<md-icon>清除</md-icon>

{{尺寸}}

</md-option>

Answer 2

您必须告诉 md-icon 您需要使用哪个图标。

像这样使用：

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Answer 3

这是一个小例子，展示了指令<md-icon>内部的使用<md-option>，只是为了证明它有效。我相信您可能缺少导致其显示文本而不是实际图标的样式表或脚本参考。

angular.module('app', ['ngMaterial', 'ngAnimate', 'ngAria'])
  .controller('ctrl', function() {
    this.commuteTypes = [{
        description: 'Walk',
        icon: 'directions_walk'
      },
      {
        description: 'Bus',
        icon: 'directions_bus'
      },
      {
        description: 'Drive',
        icon: 'directions_car'
      }
    ];

    this.commuteType = null;
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.18/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.18/angular-material.min.js"></script>
<div ng-app="app" ng-controller="ctrl as $ctrl">
  <div layout="row" layout-padding>
    <md-select placeholder="Commute" ng-model="$ctrl.commuteType">
      <md-option ng-repeat="commute in $ctrl.commuteTypes" ng-value="commute">
        <md-icon>{{ commute.icon }}</md-icon> {{ commute.description }}
      </md-option>
    </md-select>
  </div>
</div>