Floating Level und Clear-Taste in md-Autocomplete

Question

Wie https://github.com/angular/material/issues/2727 sagt, ist es nicht möglich, ein schwebendes Etikett und die Standard-Clearbutton-Funktionalität des eckigen Materials zusammen zu verwenden. Also, was ist ein sauberer Weg, um ein solches Verhalten zu erreichen, indem man eine Direktive benutzt?

Answer 1

HTML

<md-autocomplete md-floating-label="LABEL" 
       md-selected-item="$ctrl.model" md-search-text="$ctrl.searchText" 
       md-selected-item-change="$ctrl.itemChanged($ctrl.model)" 
       md-items="item in $ctrl.items" clear-autocomplete 
       md-autoselect="true" required> 
    /* whatever you need, e.g. <md-item-template> or <md-not-found> tags */ 
</md-autocomplete> 

Keine der ctrl Attribute $ so, wie sie sind hier zu nennen hat, rufen sie einfach, was Sie wollen.

RICHTLINIE

angular 
    .module('yourModule') 
    .directive('clearAutocomplete', clearAutocomplete); 

function clearAutocomplete($parse) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     const button = angular.element('<md-button>').addClass('clear-autocomplete'); 
     button.append('<i class="material-icons">clear</i>'); 
     element.append(button); 

     let searchTextModel = $parse(attrs.mdSearchText); 

     scope.$watch(searchTextModel, function(searchText) { 
     if (searchText && searchText !== '' && searchText !== null) { 
      button.addClass('visible'); 
     } else { 
      button.removeClass('visible'); 
     } 
     }); 

     button.on('click', function() { 
     searchTextModel.assign(scope, undefined); 
     }); 
    } 
    } 
} 

CSS (das ist natürlich optional)

.em-clear-autocomplete { 
    position: absolute; 
    transform: translate(0, -100%); 
    right: 8px; 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.25s linear; 

    &.visible { 
    visibility: visible; 
    opacity: 1; 
    cursor: pointer; 
    } 

    i { 
    font-size: 20px; 
    } 
} 

Wenn Sie pre ES16 verwenden, ersetzen Sie einfach let und const von var. Wenn Sie Probleme haben, die $ parse zu verstehen, werfen Sie einen Blick auf die offizielle Doku: https://docs.angularjs.org/api/ng/service/ $ parse

Riesige Dank an @sebastianhenneberg!