如何在 Angular-Material 设计中使用 md-icon 和 md-autocomplete？

Question

有没有办法把md-icon放在md-autocomplete中

   <md-autocomplete 
       md-selected-item="ctrl.selectedItem"
       md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
       md-search-text="ctrl.searchText"
       md-items="item in ctrl.querySearch(ctrl.searchText)"
       md-item-text="item.display"
       placeholder="What is your favorite US state?">

   <md-icon class="material-icon">search</md-icon> // ofcourse, I think It won't work

  </md-autocomplete>

codepen

Answer 1

angular-material（开箱即用）尚不可行。看到这个 closed issue.

作为解决方法，您可以通过一些自定义来做一些类似的事情 CSS。

查看关于此的示例 working plunker。

HTML:（注意 id 和 md-input-name )

<md-autocomplete id="custom" md-input-name="autocompleteField".../>

CSS:

#custom input[name="autocompleteField"]  {
    background: url(images/search.icon.png);
    background-repeat: no-repeat;
    background-position: 5px 7px;
    padding: 0px 35px;
}

希望对您有所帮助。

Answer 2

我认为这个问题与 md-autocomplete 内部有一个 md-input-container 这一事实有关。

这就是我最终要做的，以显示一行均匀间隔的输入字段，第一个是 md-autocomplete。

值得注意的是，我不得不将另外两个 md-input-container 包装在 flexed dif 中。

<div layout="column" layout-gt-xs="row">
    <div layout="row" flex layout-align="start start">
      <md-input-container>
      <!-- it looks like in angular material md-icon needs to be surrounded by a div -->
        <div><md-icon class="yellow-fg" md-font-icon="icon-white-balance-sunny"></md-icon></div>
      </md-input-container>
      <md-autocomplete flex usual_attributes_here>
        (...)
      </md-autocomplete>
    </div>
    <div layout="row" flex>
      <md-input-container flex>
        <md-icon md-font-icon="icon-numeric"></md-icon>
        (...)
      </md-input-container>
    </div>
    <div layout="row" flex>
      <md-input-container flex>
        <md-icon md-font-icon="icon-numeric"></md-icon>
        (...)
      </md-input-container>
    </div>
</div>

Answer 3

另一种方法是将图标附加到 md-autocomplete 内的 md-input-container。 md-input-container 仅在您使用 md-floating-label 属性时附加。

JS：超时和编译是使图标出现所必需的。通过附加 md-icon-left class，输入接收 36px 的填充，就像每个其他 md-input-container 有一个图标

attrs[[=39=]]将使用属性值作为图标名称

  ...
  .directive('appendIcon', appendIcon);

  function appendIcon($timeout, $compile) {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
        var vm = this;
        $timeout(function() {
          var container = angular.element(elem[0].querySelector('md-input-container'));

          container.addClass('md-icon-left');
          var icon = $compile('<md-icon class="material-icons">' + attrs[vm.name] + '</md-icon>')(scope);
          container.append(icon);
        });
      }
    };
  };

HTML：注意 append-icon="search" 和 md-floating-label="State"

  <md-autocomplete 
   append-icon="search"
   md-floating-label="State"
   id="custom" flex="" 
   required=""

这是一个代码笔： http://codepen.io/eydrian/pen/ZLdgwQ

Answer 4

我更喜欢下面的方法，以便能够使用 .svg 图标。我不仅可以继续使用 Material 设计图标，还可以用它制作按钮，以触发事件，例如打开菜单等，提供帮助信息等。

<div style="float: left; padding: 25px 10px 0 4px;">
    <md-icon md-svg-icon="/images/icons/email.svg" class="input-icon-color"></md-icon>
</div>
<div style="overflow: hidden;">
    <md-autocomplete 
        md-selected-item="ctrl.selectedItem"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        placeholder="What is your favorite US state?">

        <md-icon class="material-icon">search</md-icon>
    </md-autocomplete>
</div>

以下样式是在 <md-input-container> 中使用时模仿 .svg 图标的颜色：

<style>
.input-icon-color {
    color: rgba(0,0,0,0.87);
}
</style>

Answer 5

因为这是有人希望将图标添加到 angular material 自动完成

的热门 link 之一

如果你想使用新 angular material 做同样的事情，可以通过在输入字段后使用 mat-icon 轻松完成

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
      <mat-icon matSuffix>search</mat-icon>
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

stackblitz link 举个例子 https://stackblitz.com/angular/kbmrnjeydjm

如何在 Angular-Material 设计中使用 md-icon 和 md-autocomplete？

How to use md-icon with md-autocomplete in Angular-Material Design?

typescript

material-design

angular-material