基于选择的角度过滤器特定字段

Question

I would like to filter an ng-repeat that I have based upon a select and an input. If the input is set to all then filter on all fields, if it is set to a different select value then only filter on that field.

I have HTML that looks like this

<input type="search" class="form-control" id="searchBox" ng-model="searchText">

<select class="form-control" id="searchType" name="searchType" ng-model="searchType">
  <option value="all">All Fields</option>
  <option value="locationCode">Location Code</option>
</select>

<!-- more code -->

<tr ng-if="!searchAll" ng-repeat="location in locations | filter:{searchType: searchText}" ts-repeat>
<tr ng-if="searchAll" ng-repeat="location in locations | filter:searchText" ts-repeat>

I'm also updating $location.search() when either the select or input are changed, but this should be the relevant part of my controller:

$scope.$watch('searchType', function(value) {
  $location.search('t', value).replace();
  $scope.searchAll = $scope.searchType === 'all';
});

My filter works properly when all is selected, but shows no data at all when another value is selected. However, it does work if I hardcode one of the field values in searchType in the first ng-if .

What obvious thing am I missing?

Answer 1

I don't think the left hand value in an object can be variable. So when you do this

location in locations | filter:{searchType: searchText}

You a expecting the filter to find a property named searchType instead of locationCode

I think the simplest fix would be to create a filter function in the controller and handle the switch in there.

Something like :

$scope.propertyFilter = function(item) {
  return item[$scope.searchType] == $scope.searchText;
} 

And then inside your template

location in locations | filter:propertyFilter

I also wonder if treating the object as a string might work. Something like this :

location in locations | filter:{{"{" + searchType + ":" + searchText + "}"}}