I am using ng-repeat to render a complex set of data in the UI. After receiving the data, I need to filter the data based on some checkboxes, sliders etc. Right now I will have 6 custom filters, based on time, price, and some checkboxes. I am using them like following
ng:repeat="response in searchResponse|filter:filter1(response)|filter:filter2(response)|filter:filter3(response)|filter:filter4(response)|filter:filter5(response)|filter:filter6(response)|limitTo:totalDisplayed
This works fine but I think this is a very expensive way of applying filters. I have noticed a considerable lag in performance in rendering after this. Is there a better way to handle filters here ? Considering the fact that I may have more such filters in future.
Please suggest. Thanks !
Instead of chaining filters, why not something like:
ng:repeat="response in searchResponse|filter:genericFilter(response, filterConditions)|limitTo:totalDisplayed
What you're doing is like chaining filters one after another, and that may not necessarily be needed – one filter that selects out the results based on filterConditions
Related
why did Ant choose to implement the filters in this way - https://ant.design/components/table/#components-table-demo-head
the filters are hidden away and it is not easy to see. In case we want to build complex filter choices, it is not user-friendly.
Why did they not use components like https://ant.design/components/select/#components-select-demo-multiple or https://ant.design/components/cascader/ to implement filters as a component on the side ?
That is just a simple filter to ease the life of developer when you want a quick filter. building everything into the table would make the table potentially much larger in bundle size.
however you can always implement your own filter with components that you mentioned and filter the data yourself and pass to the table.
I am using multiple ng-repeats in the ionic view to show json data, i can get the data in console in no time but I guess having multiple ng-repeats has slowed the perform altogether, which cause the app to freeze and takes a minute or so for the data to appear on the view.
Is there an alternate way , to avoid speed up the performance. ?
You can use collection-repeat.
collection-repeat allows an app to show huge lists of items much more
performant than ng-repeat.
I'm wondering if it's possible to use Filter Functions when requesting a view something like:
http://localhost:5984/db/myView/myMap?filter=myFilter.
I'm going to use Complex Keys with separate views eventually but I'm wondering if this is possible. So far I tried but it's not showing me any differences.
According to the documentation it's not possible to do so. You can pass keys to query your view but you can't filter it. Filter can be applied to _changes aswell as in replications.
Some modules of the application I'm writing give the user the option to filter a dataset and paginate the results.
After getting everything to work as intended, I'm trying to refactor the code in order to remove code duplication.
Each and everyone of the afore mentioned modules share the same bit of logic for filtering and pagination.
I'm wondering which is the best practice to follow in order to remove that kind of duplication.
As of now I was thinking of creating a "filter and pagination" service with the following API:
Paginate(items,predicate,itemsPerPage)
Returns an object:
{
paginatedItems
nrOfPages
}
Predicate is called for each and every item passed in the collection, and it is used
to select items based on user preferences.
Now each module would take advantage of that API.
Is there a better, recomended way?
Thanks in advance for your help
It seems that AngularJS really puts an heavy emphasis on using filters and other ng directive in your view to filter and sort your data, instead of doing it manually in the model. Is there any reason for that, ie is it faster, cached, or something?
I want to show a list sorted for example, but I also want to access the sorted list for other purposes that are not view related. It's very easy if the list is directly sorted in the model, so I'm trying to understand if there is a drawback to doing it this way.
Thanks!
I don't see anything wrong with pre-sorting the data if it makes sense to you but here are some pros and cons for using Angular filters.
Pros:
Clear separation of the view and model. The model/controller does not need to be aware of or include code related to how the data will be displayed/sorted/filtered
Since filters are executed as the model changes the orderBy filter can automatically sort as items are added to an array via the UI
Filters can be used to format data for display (the currency filter for instance) as well as modify the DOM adding/removing items (the filter filter for instance) without modifying the underlying model data
Promotes reuse of commonly used built in or custom filter functions
Cons:
Poorly written filter function can cause performance issues. You can see a purposely contrived example in the AngularJS Batarang video starting at 4:30. Any code (not just a filter) can be written poorly but it's not initially obvious how often a filter gets called.
Slightly confusing in that some filters act on a single number/string (currency filter) and some on arrays (orderBy filter)
Syntax to pass arguments and chaining of filters can also be a bit confusing
I'm sure there are many more pros/cons but hopefully this helps!