AngularJs filter on two object fields - html

Question

I've done filtering numerous times before, but am having trouble with this specific case. I have a list of objects set up in pagination, but I also want to be able to filter them for ease of use. An example object might look like:
{
baseline:0.75
clonedFrom:Object
description:"Just a simple description.."
includeable:false
key:"bc889881-7979-4e04-b586-d53faab26b6b"
name:"Just a simple question?"
type:"BayesianModel"
version:1483477351992
versionComment:null
versionLabel:"0.11"
}
For the most part, what the object looks like is arbitrary, I just included it for ease of answering. I am trying to filter on both the name and description of the object at the same time. For example if the user knew a key word in either they could narrow down the results.
I have the input for the filter and the results inside of a <ul> shown below:
<ul class="list-group">
<li class="list-group-item">
<div class="form-group has-feedback">
<input type="text"
ng-model="vm.resultFilter"
ng-change="vm.updateFilter()"
class="form-control filterInput"
placeholder="Filter Results" />
<span ng-if="vm.resultFilter"
ng-click="vm.resultFilter = ''; vm.updateFilter();"
class="fa fa-times fa-lg form-control-feedback">
</span>
</div>
</li>
<li class="list-group-item link-row model-list"
ng-repeat="result in vm.filteredResults
| startFrom : ((vm.currentPage - 1) * vm.itemsPerPage)
| limitTo: vm.itemsPerPage"
ng-if="result.name != vm.model.name"
ng-click="vm.selected = result;"
ng-class="{selected: result === vm.selected}"
ng-init="displayNumber = vm.incrementDisplayIndex();">
<h4 class="list-group-item-heading">{{result.description}} - {{result.name !== vm.model.name}}</h4>
<p class="list-group-item-text">
{{result.name}}
</p>
</li>
</ul>
So the name of the filter is vm.resultFilter and the cooresponding method that is called every time the filter is updated is updateFilter() (which is necessary for the pagination stuff).
function updateFilter() {
vm.filteredResults = $filter('filter')(vm.results, {
'name': vm.resultFilter,
'description': vm.resultFilter
});
vm.totalItems = vm.filteredResults.length;
vm.noOfPages = Math.ceil(vm.filteredResults.length / vm.itemsPerPage);
}
I am just having trouble with getting the filtering to work 100%. Sometimes it appears it's only filtering on the description field, but then sometimes I will search a word that is in the description field of only one result and it will filter with no results (which would be false). Any tips appreciated.

Answer 1

Since your are not using the filter inside your HTML, I recommend you to use the filter property from the Array prototype.
function updateFilter() {
vm.filteredResults = vm.results.filter(function(item){
return (item.name==vm.resultFilter || item.description==vm.resultFilter )
}
vm.totalItems = vm.filteredResults.length;
vm.noOfPages = Math.ceil(vm.filteredResults.length / vm.itemsPerPage);
}
In case you need to determines whether a string contains the characters of a specified string. You might need to use includes instead of ==
vm.filteredResults = vm.results.filter(function(item){
return (item.name.includes(vm.resultFilter) || item.description.includes(vm.resultFilter) )
}