Parse objects
First off, let’s have a look at a Parse object:
As you can see, it’s quite bulky. By default, ngFilter will match any property of an object. So, Angular looks at all properties and their inner properties, etc. This is clearly our performance breaker.
Solution
We want to tell Angular to not look at every property, for which ngFilter has support out of the box. However, in my case, I want to search multiple fields with an OR operator, having only one input field for the search. In order to achieve this you can do two things.
Parse attributes property
Parse objects have a property called attributes. This property contains an object with only the attributes of this object:
<div ng-controller="MyCtrl">
<input type="text" ng-model="search.attributes">
<ul>
<li ng-repeat="item in items | filter:search">
{{item.field}}
</li>
</ul>
</div>If you have a flat object with no relationships to other objects, this will probably be sufficient for you. If not: read on…
Explicitly define filter fields
In my case, the Parse objects had relationships to other Parse objects, making Angular search those objects too. The solution above improved the performance, but not yet satisfactory.
Another solution is to make your filter fields explicit by adding a new property to your Parse objects:
angular.forEach(items, function(value) {
value.filterFields = {
'field1': value.field1,
'field2': value.field2,
'field3': value.relation.field3,
...
}
});Then, in your ngModel, you can filter on filterFields only.
<div ng-controller="MyCtrl">
<input type="text" ng-model="search.filterFields">
<ul>
<li ng-repeat="item in items | filter:search">
{{item.text}}
</li>
</ul>
</div>For me, this solved my performance problem for ngFilter with Parse objects. In my case, the data is read-only, so this is sufficient. Please be aware that when you have two-way binding on the fields you filter on using this last approach, the filter fields are not automatically updated in this solution.
