Clear-Wert von Select-Element beim Filtern in Angular

Question

Ich habe eine grundlegende Auswahlelement mit Optionen, die Drop-Down-Verbindung zu einem kleinen Satz von Daten, die über das Dropdown-Filter gefiltert wird. Anfangs beim Laden der Seite hat das select-Element einen Wert von undefined (entsprechend der Konsole), aber nach dem Auswählen einer Option nimmt es den Wert dieser Option an. Wie kann ich zu undefined zurückkehren? Grundsätzlich möchte ich eine Option in der Liste auswählen können, die alle Daten anzeigt. Im Folgenden finden Sie meine App auf JSBin:

App

Answer 1

fügen Sie eine benutzerdefinierte Filterfunktion

$scope.filterByGenre = function(item){ 

    if (!$scope.selectedGenre || $scope.selectedGenre == 'All'){ 
    return true; 
    } 

    return item.genre && item.genre.indexOf($scope.selectedGenre) != -1; 

} 

Änderung Ihrer <select> dazu:

<select ng-model="selectedGenre" 
      ng-options="choice as choice for (idx, choice) in genres" 
      name="genre" 
      class="genre-dropdown"> 
</select> 

Änderung <tr ng-repeat="... Filter dazu:

<tr ng-repeat="movie in movies | filter:searchBar | filter:filterByGenre | orderBy:sortType:sortReverse"> 

Online Demo - http://jsbin.com/riyafupexu/1/edit?html,js,output

Answer 2

Ich bin verwirrt, Sie verwenden ng-options aber Sie haben auch die statischen Optionen zur Verfügung gestellt. Für eine schnelle Lösung in diesem Fall können Sie diese ng-Optionen entfernen und das Kommentarzeichen All auskommentieren und den Wert entfernen.

Like:

<select ng-model="selectedGenre" 
     ng-change="handleSelect()" 
     name="genre" 
     class="genre-dropdown"> 
    <option selected="selected" value="">All</option> 
    <option value="Action">Action</option> 
    <option value="Adventure">Adventure</option> 
    <option value="Animation">Animation</option> 
    <option value="Biography">Biography</option> 
    <option value="Comedy">Comedy</option> 
    <option value="Crime">Crime</option> 
    <option value="Drama">Drama</option> 
    <option value="Fantasy">Fantasy</option> 
    <option value="History">History</option> 
    <option value="Horror">Horror</option> 
    <option value="Romance">Romance</option> 
    <option value="Sci-Fi">Sci-Fi</option> 
    <option value="Western">Western</option> 
</select> 

Answer 3

Sie können es auf diese Weise tun:

$scope.selectedGenre = "";//set the model to blank. 
    $scope.genres = 'All,Action,Adventure,Animation,Biography,Comedy,Crime,Drama,Fantasy,History,Horror,Romance,Sci-Fi,Western'; 
    //create an array after splitting the commas 
    $scope.genresAry = $scope.genres.split(','); 
    $scope.genresAry.push("");//push blank into the array. 

In HTML Verwendung genresAry.

<select ng-model="selectedGenre" 
       ng-options="choice as choice for (idx, choice) in genresAry" 
       ng-change="handleSelect()" 
       name="genre" 
       class="genre-dropdown"> 

Arbeits Code here