在 Angular 中过滤时清除 select 元素的值

Question

我有一个基本的 select 元素，其中包含下拉列表连接到一小组数据的选项，这些数据正在使用下拉列表进行过滤。最初在页面加载时，select 元素的值为 undefined（根据控制台），但是在 selecting 任何选项后，它采用该选项的值。

我怎样才能回到undefined？基本上我希望能够 select 列表中的一个选项，该选项将返回显示所有数据。下面是我在 JSBin 上的应用程序：

App

Answer 1

我很困惑，您使用的是 ng-options 但您还提供了静态选项。对于这种情况的快速修复，您可以删除该 ng-options 并取消注释 All 并删除它的值。

喜欢：

<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 2

添加自定义过滤功能

$scope.filterByGenre = function(item){

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

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

}

将您的 <select> 更改为：

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

将 <tr ng-repeat="... 过滤器更改为此：

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

在线演示 - http://jsbin.com/riyafupexu/1/edit?html,js,output

Answer 3

你可以这样做：

 $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.

在 HTML 中使用 genresAry。

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

工作代码here

在 Angular 中过滤时清除 select 元素的值

Clear value from select element when filtering in Angular

javascript

angularjs

angularjs-filter