Как использовать md-icon с md-autocomplete в Angular -Материал Дизайн?

Есть ли способ разместить md-значок в 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

Ответ 1

Это еще не возможно с angular -материалом (из коробки). См. закрытая проблема.

В качестве обходного пути вы можете сделать somethihg похожим на немного пользовательского CSS.

См. пример этого рабочего плунжера.

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;
}

Надеюсь, что это поможет.

Ответ 2

Другим подходом может быть добавление значка в контейнер md-input внутри md-автозаполнения. Контейнер md-input только добавляется, если вы используете атрибут md-floating-label.

JS: таймаут и компиляция была необходима для отображения значка. Добавляя класс md-icon-left, вход получает дополнение 36px, как и любой другой md-input-контейнер, который имеет значок

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 = "search" и md-floating-label = "State"

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

Здесь код: http://codepen.io/eydrian/pen/ZLdgwQ

Ответ 3

Я считаю, что проблема связана с тем, что md-autocomplete имеет в качестве контейнера md-input-внутри.

Это то, что я закончил, чтобы отобразить ряд равномерно распределенных полей ввода, причем первый из них является md-автозаполнением.

В частности, мне пришлось обернуть два других контейнера md-input в 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>