Question

我是angularJS的新手，有人可以回答我如何在md-option中添加md-icon吗？

我尝试了<md-option>ABC <md-icon>delete</md-icon></md-option>，但是选择后它将给出这样的输出

“ ABC删除”

这个的任何解决方案？

Answer 1

与其他任何子元素一样

清除

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>

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

3 个答案: