There seems to be a lot of conflicting information online regarding this issue, but I am in search of a concise solution.
My dataset consists of a list of countries around the world, including their name, ISO alpha code, region, and more.
To display this data in a table, I am using an ng-repeat:
<tr ng-repeat="i in filteredItems = (iso3166 | filter: countryFilter)">Within the table, I have a text field and a dropdown for filtering the list.
The text field is intended to filter by country name or ISO alpha code.
<input type="text" id="countrySearch" placeholder="Country" ng-model="countryQuery">
This functionality is achieved with the following code in the Controller:
$scope.countryFilter = function (value) {
if (angular.isUndefined($scope.countryQuery) || $scope.countryQuery === '') {
return true;
}
return value.name.indexOf($scope.countryQuery) >= 0 || value.alpha_2.indexOf($scope.countryQuery) >= 0;
};
The challenge lies in integrating the dropdown menu. The dropdown contains an array of objects representing different regions of the world, such as:
$scope.regionMenu = [
{
label: 'Show All',
value: ''
},
{
label: 'EU',
value: 'Europe'
},...
and
<select ng-model="region" ng-options="s.value as s.label for s in regionMenu"></select>
The objective is for the input field and dropdown to work together, filtering the items based on:
(ISO alpha-2 OR Name) AND (region chosen in menu)
Any guidance on modifying the countryFilter function or rewriting it entirely to achieve this would be greatly appreciated.