CODEWITHSUNDEEP
javascriptangularjsangularjs-filter
Jose
Jose

Reputation: 5210

Clear value from select element when filtering in Angular

I have a basic select element with options that dropdown hooked up to a small set of data which is being filtered using the dropdown. Initially on page load the select element has a value of undefined (according to the console), however after selecting any option it takes on the value of that option.

How can I go back to undefined? Basically I want to be able to select an option in the list that will go back to displaying all of the data. Below is my app on JSBin:

App

Upvotes: 3

Views: 1615

Answers (3)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do it this way:

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

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

working code here

Upvotes: 1

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34257

add a custom filter function

$scope.filterByGenre = function(item){

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

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

}

change your <select> to this:

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

change <tr ng-repeat="... filters to this:

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

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

Upvotes: 1

Adrian
Adrian

Reputation: 1587

I'm confused, you are using ng-options but you also provided the static options. For a quick fix in this case you can remove that ng-options and uncomment that All and remove it's value.

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>

Upvotes: 1

Related Questions