Làm thế nào để sử dụng md-icon với md-autocomplete trong Angular-Material Design?

Question

Có cách nào để đặt md-biểu tượng trong 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

này chưa posible với góc vật chất (out of the box). Xem số closed issue này.

Như một giải pháp thay thế, bạn có thể làm somethihg tương tự với một chút CSS tùy chỉnh.

Xem ví dụ về số working plunker này.

HTML: (lưu ý id và md-input-tên)

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

Hy vọng nó giúp.

Answer 2

Tôi tin rằng sự cố được kết nối với thực tế là tự động hoàn thành md có md-input-container bên trong nó.

Đây là những gì tôi đã kết thúc để hiển thị một hàng các trường đầu vào được đặt cách đều nhau với trường đầu tiên là md-autocomplete.

Đáng chú ý là tôi phải bọc hai hộp mực md-đầu vào khác trong các độ khó uốn.

<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

cách tiếp cận khác có thể là để thêm vào biểu tượng để các md-input-chứa bên trong md-autocomplete. Md-input-container chỉ được nối thêm, nếu bạn đang sử dụng thuộc tính md-floating-label.

JS: thời gian chờ và biên dịch là cần thiết để làm cho biểu tượng xuất hiện. Bằng cách nối thêm lớp md-icon-left, đầu vào nhận được padding là 36px, giống như mọi md-input-container khác có biểu tượng

attrs [vm.name] sẽ sử dụng giá trị thuộc tính làm biểu tượng tên

... 
    .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: lưu ý append-icon = "search" và md-nổi-label = "Nhà nước"

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

Dưới đây là một codepen: http://codepen.io/eydrian/pen/ZLdgwQ