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:
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
$scope.filterByGenre inside the link property of the directive, but it refuses to call it. DISREGARD ...I had a typo :)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>
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
