एंगुलर-सामग्री डिजाइन में एमडी-ऑटोकंपलेट के साथ एमडी-आइकन का उपयोग कैसे करें?

Question

वहाँ MD-स्वत: पूर्ण में एमडी आइकन जगह

<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

यह अभी तक कोणीय-सामग्री के साथ posible नहीं है (बॉक्स से बाहर) कोई तरीका है। यह closed issue देखें।

एक कामकाज के रूप में, आप कुछ कस्टम सीएसएस के साथ कुछ ऐसा कर सकते हैं।

इस working plunker पर एक उदाहरण देखें।

HTML: (नोट आईडी और MD-इनपुट-नाम)

<md-autocomplete id="custom" md-input-name="autocompleteField".../> 

सीएसएस:

#custom input[name="autocompleteField"] { 
    background: url(images/search.icon.png); 
    background-repeat: no-repeat; 
    background-position: 5px 7px; 
    padding: 0px 35px; 
} 

आशा है कि यह मदद करता है।

Answer 2

मुझे विश्वास है कि यह मुद्दा इस तथ्य से जुड़ा हुआ है कि एमडी-ऑटोकंपलेट के अंदर एक एमडी-इनपुट-कंटेनर है।

यही वह है जो मैंने समान रूप से दूरी वाले इनपुट फ़ील्ड की एक पंक्ति प्रदर्शित करने के लिए किया है, जिसमें पहले व्यक्ति एमडी-ऑटोकंपलेट है।

विशेष रूप से मुझे फ्लेक्सड डिस्प्ले में अन्य दो एमडी-इनपुट-कंटेनर लपेटना पड़ा।

<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

एक और दृष्टिकोण MD-स्वत: पूर्ण अंदर MD-इनपुट-कंटेनर के लिए आइकन संलग्न करने के लिए हो सकता है। एमडी-इनपुट-कंटेनर केवल तभी जोड़ा जाता है, यदि आप एमडी-फ़्लोटिंग-लेबल विशेषता का उपयोग कर रहे हैं।

जेएस: टाइमआउट और संकलन आइकन प्रकट करने के लिए आवश्यक था। md-चिह्न-बाएँ वर्ग जोड़कर, इनपुट हर दूसरे MD-इनपुट-कंटेनर एक आइकन है की तरह, 36px की पैडिंग प्राप्त करता

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

एचटीएमएल: नोट संलग्न आइकन = "खोज" और एमडी चल लेबल = "राज्य"

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

यहाँ एक codepen है: http://codepen.io/eydrian/pen/ZLdgwQ