Question

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

   <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

这还不具备角度材料（开箱即用）。请参阅此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-floating-label属性，则仅附加md-input-container。

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

attrs [vm.name] 将使用属性值作为图标名称

  ...
  .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 =＆＃34;搜索＆＃34;和md-floating-label =＆＃34; State＆＃34;

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

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

Answer 3

我认为这个问题与md-autocomplete在其中包含md-input-container这一事实有关。

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

值得注意的是，我不得不将其他两个md-input-container包装在flexed difs中。

<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 4

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

<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

因为这是当有人要向自动完成角度材料添加图标的顶部链接之一

如果要使用新的角形材料执行相同的操作，可以在输入字段后使用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链接的示例 https://stackblitz.com/angular/kbmrnjeydjm

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

5 个答案: