Come usare md-icon con md-autocomplete in Angular-Material Design?

Question

C'è un modo per posizionare md-icona nel md-completamento automatico

<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

Questo non è ancora posible con angolare-materiale (out of the box). Vedere questo closed issue.

Come soluzione temporanea, è possibile eseguire operazioni simili con un po 'di CSS personalizzato.

Vedere un esempio su questo working plunker.

HTML: (nota id e md-input-nome)

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

Speranza che aiuta.

Answer 2

Credo che il problema sia collegato al fatto che md-autocomplete ha come contenitore di input md al suo interno.

Questo è quello che ho finito per visualizzare una riga di campi di input equidistanti con il primo che è md-autocomplete.

In particolare ho dovuto avvolgere gli altri due contenitori di input md in difs flessibili.

<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

altro approccio potrebbe essere quello di aggiungere l'icona alla md-input-contenitore all'interno del md-automatico. Il contenitore md-input viene aggiunto solo se si utilizza l'attributo md-floating-label.

JS: il timeout e la compilazione erano necessari per far apparire l'icona. Aggiungendo la classe md-icona-sinistra, l'ingresso riceve un'imbottitura di 36px, come ogni altro md-input-contenitore che ha un'icona

attrs [vm.name] userà il valore di attributo come icona nome

... 
    .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: nota append-icon = "search" e MD-floating-label = "Stato"

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

Ecco un codepen: http://codepen.io/eydrian/pen/ZLdgwQ