कोणीय सामग्री इनपुट

Question

मैं Angular Material के बाहर मेरा इनपुट खोज पट्टी करने के लिए एक खोज आइकन जोड़ने के लिए कोशिश कर रहा हूँ करने के लिए आइकन जोड़ें:

<aside class="main-sidebar"> 
    <section class="sidebar control-sidebar-dark" id="leftMenu"> 
     <div> 
      <!-- need to disable overflow-x somehow cuz of menu --> 
      <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true" md-selected="selectedIndex"> 

       <md-tab label="<i class='fa fa-search'></i>" ng-if="handleResize()" search-Focus> 
        <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> 
         <!-- search Menu --> 
         <div> 
          <div> 
           <form action="javascript:void(0)" method="get" class="sidebar-form" id="searchForm"> 
            <div> 
            <md-content md-theme="docs-dark"> 
             <md-input-container style="padding-bottom: 5px;"> 
              <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label> 
              <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)"> 
             </md-input-container> 
            </md-content> 
            </div> 

           </form> 
           <div> 

जब मैं प्रतीक है कि हम वहाँ देख सकते हैं के साथ उदाहरण के पुन: पेश करने की कोशिश कर रहा हूँ: http://codepen.io/anon/pen/rOxMdR, मुझे स्टाइल समस्याएं हैं और कुछ भी ठीक से काम नहीं करता है।

कोई विचार नहीं कि मैं अपने मौजूदा इनपुट में केवल एक खोज आइकन कैसे जोड़ सकता हूं?

Answer 1

जैसा कि आप angular-material-design और font-awesome-icon का उपयोग कर रहे हैं <md-icon>md-font-icon विशेषता के साथ तत्व के रूप में उपयोग करें।

और md-inout-container के साथ class="md-icon-float" का उपयोग करें।

कार्य plunker

बदलें इस:

<md-content md-theme="docs-dark"> 
    <md-input-container style="padding-bottom: 5px;"> 
     <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label> 
     <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)"> 
    </md-input-container> 
</md-content> 

करने के लिए:

<md-content md-theme="docs-dark"> 
    <md-input-container class="md-icon-float"> 
     <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label> 
     <md-icon md-font-icon="fa fa-search"></md-icon> 
     <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)"> 
    </md-input-container> 
</md-content> 

Answer 2

यह सवाल बहुत पुराना है, लेकिन मैं तो बस आज सुबह ही समस्या में पड़ गए और @gaurav से जवाब इस लिंक में ओपी की तलाश में वही काम नहीं किया: https://material.angularjs.org/latest/#/demo/material.components.input

यदि आप क्रोम डेवलपर कंसोल खोलते हैं तो आप तत्व का निरीक्षण कर सकते हैं और देख सकते हैं कि डेमो कोड लिखने वाले लोग नीचे आइकन अनुभाग में ईमेल इनपुट के आइकन व्यवहार के लिए कस्टम क्लास का उपयोग कर रहे हैं। मैंने वही वांछित प्रभाव प्राप्त करने के लिए उस व्यवहार की अनिवार्य रूप से प्रतिलिपि बनाई।

HTML:

<md-input-container class="md-block md-icon-left"> 
    <md-icon class="form-icon">lock_outline</md-icon> 
    <label>Password</label> 
    <input 
     type="password" ng-model="user.password" name="password" 
     ng-required="true" 
     ng-keyup="$event.keyCode == 13 && loginForm.$valid && login()"/> 
</md-input-container> 

सीएसएस: नोट करने के लिए

/* Angular extension */ 
md-input-container.md-input-invalid > md-icon.form-icon { 
    color: #B71C1C; 
} 

एक बात है कि मैं वर्ग को जोड़ने के लिए किया था कि "md-चिह्न-बाएँ" मेरे MD-कंटेनर के लिए या प्रतीक होगा इनपुट के शीर्ष पर ढेर। मैं अपनी परियोजना में कोणीय सामग्री v1.1.0 और कोणीय जेएस v1.5.5 का उपयोग कर रहा हूँ। मुझे उम्मीद है कि यह उत्तर कोणीय सामग्री डेमो में समान व्यवहार प्राप्त करने के लिए किसी और की सहायता करने में मदद करता है।