2016-09-12 2 views
0

Meine md-Autocomplete zeigt keine Daten und die MD-nicht gefundenen Daten zur gleichen Zeit.
Angular Material Autocomplete keine Daten oder nicht gefundene Nachricht

angular.module('BlankApp').controller('ctrl', function($scope, $q){ 
    $scope.items = [{name: 'item1', id: 1}, {name: 'item2', id: 2}, {name: 'item3', id: 3}]; 

    $scope.promisedItems = function(){ 
     var deferred = $q.defer(); 
     deferred.resolve(items); 
     return deferred.promise; 
    } 
}); 

<md-autocomplete md-selected-item="selectedItem2" md-search-text="searchText2" md-items="item in promisedItems()" md-item-text="item.name" md-min-length="0" placeholder="items"> 
    <md-item-template> 
     <span md-highlight-text="searchText2" md-highlight-flags="^i">{{item.name}}</span> 
    </md-item-template> 
    <md-not-found> 
     No states matching "{{searchText2}}" were found. 
    </md-not-found> 
</md-autocomplete> 

Check the following codepen

Attempt1 zeigt die Daten aber zeigt nicht die 'nicht-gefunden-Nachricht'.
Versuch2 zeigt die 'nicht gefundene Nachricht' an, zeigt aber keine Daten an.

Ich wickelte es in ein Versprechen.
Wie kann ich beide zur gleichen Zeit arbeiten?

Antwort

0

Stellt sich heraus, md-Autocomplete macht nicht die "Suche Arbeit" für Sie. Sie müssen die Suchlogik implementieren und die gefundenen Elemente zurückgeben.

Ich habe meine Suchlogik aka Filter generisch, so dass Sie nicht Tonnen von Suchlogiken machen müssen.

$scope.searchCollection = function (searchString, collection, propertyName) { 
     var deferred = $q.defer(); 
     var result = searchString ? collection.filter(createFilterFor(searchString, propertyName)) : collection; 
     deferred.resolve(result); 
     return deferred.promise; 
    } 

    function createFilterFor(searchString, propertyName) { 
     var lowercaseQuery = angular.lowercase(searchString); 
     return function filterFn(item) { 
      return (angular.lowercase(item[propertyName]).indexOf(lowercaseQuery) === 0); 
     }; 
    } 

Nutzungs md-items="item in searchCollection(searchText, myCollection, 'propertyNameToSearchIn')"

Verwandte Themen