Wie md-icon mit md-autocomplete im Angular-Material Design zu verwenden?

Question

Gibt es eine Möglichkeit md-Symbol in 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

Dies ist noch nicht posible mit Winkel Material (aus dem Kasten) zu platzieren. Siehe hierzu closed issue.

Als Workaround können Sie etwas ähnliches mit ein wenig benutzerdefinierten CSS tun.

Siehe ein Beispiel hierzu working plunker.

HTML: (Anmerkung id und 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; 
} 

Hoffe, es hilft.

Answer 2

Ich glaube, dass das Problem mit der Tatsache verbunden ist, dass md-autocomplete als ein md-Eingabebehälter darin hat.

Dies ist, was ich getan habe, um eine Reihe von gleichmäßigen Eingabefeldern mit der ersten anzuzeigen, die md-Autocomplete ist.

Vor allem musste ich die anderen beiden md-Eingabebehälter in flexed difs wickeln.

<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

Ein weiterer Ansatz könnte das Symbol der md-input-Behälter innerhalb des md-Autovervollständigung anzuhängen. Der md-Eingabebehälter wird nur angefügt, wenn Sie das Attribut md-floating-label verwenden.

JS: Die Zeitüberschreitung und die Kompilierung war notwendig, um das Symbol erscheinen zu lassen. Durch Anhängen des md-icon-links-Klasse empfängt die Eingabe eine Polsterung von 36px, wie jeder andere md-input-Container, der ein Symbol

attrs hat [vm.name] wird den Attributwert als das Symbol verwenden 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: note append-icon = "suchen" und md-Floating-label = "State"

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

Hier ist ein codepen: http://codepen.io/eydrian/pen/ZLdgwQ