javascript - 在 Angular 中过滤时清除选择元素的值

Question

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

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

App

Answer 1

添加自定义过滤函数

$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