Как добавить md-icon в md-option? - PullRequest
Новая
       24

Как добавить md-icon в md-option?

0 голосов
/ 16 апреля 2019

Я новичок в angularJS. Может кто-нибудь ответить мне, как добавить md-icon в md-option?

Я пробовал <md-option>ABC <md-icon>delete</md-icon></md-option>, но при выборе

он выдаст вот так

"ABCdelete"

любое решение этого ??

Ответы [ 3 ]

0 голосов
/ 16 апреля 2019

Вы должны указать md-icon, какой значок вам нужно использовать.

Использовать так: 

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>
0 голосов
/ 16 апреля 2019

Вот небольшой пример, показывающий использование <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>
0 голосов
/ 16 апреля 2019

Как и любой другой дочерний элемент

clear</ md-icon>

{{size}}

</ md-option>

...