Using an AngularJS ng-repeat alias expression with multiple filters

Question

Using an AngularJS ng-repeat alias expression with multiple filters

As stated in the Angular ngRepeat documentation, the alias expression can only be used at the end of the ngRepeat:

It's important to note that `as [variable name]` is not an operator, but rather a part of the ngRepeat micro-syntax and must be placed at the end (not as operator within an expression).

In my situation with ng-repeat, I want to filter out items based on a property and then utilize the limitTo filter for pagination.

Is there a way to determine the number of filtered items before applying the second filter?

Unfortunately, simply using this doesn't work:

item in c.items | filter: c.contextFilter as filteredItems | limitTo: c.pagination.pageSize : c.pagination.currentPage*c.pagination.pageSize

Are there any alternative ways to obtain the value of filteredItems.length?

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Encountered the same issue, managed to solve it by storing the result of the initial portion of the filter expression in a new variable. For your reference:

item in filteredItems = (c.items | filter: c.contextFilter) | limitTo: c.pagination.pageSize : c.pagination.currentPage*c.pagination.pageSize

<div>{{filteredItems.length}}</div>

Below is a detailed example using the controllerAs syntax:

item in $ctrl.filteredItems = ($ctrl.items | filter: $ctrl.customFilter | 
orderBy: $ctrl.order) | limitTo: $ctrl.pagination.pageSize : 
$ctrl.pagination.currentPage*$ctrl.pagination.pageSize`

Answer 2

Encountered the same issue, managed to solve it by storing the result of the initial portion of the filter expression in a new variable. For your reference:

item in filteredItems = (c.items | filter: c.contextFilter) | limitTo: c.pagination.pageSize : c.pagination.currentPage*c.pagination.pageSize

<div>{{filteredItems.length}}</div>

Below is a detailed example using the controllerAs syntax:

item in $ctrl.filteredItems = ($ctrl.items | filter: $ctrl.customFilter | 
orderBy: $ctrl.order) | limitTo: $ctrl.pagination.pageSize : 
$ctrl.pagination.currentPage*$ctrl.pagination.pageSize`

Using an AngularJS ng-repeat alias expression with multiple filters

Answer №1

Similar questions

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Produced inputs and preset values

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

Navigating string primitives when using AngularJS and $http: Tips and Tricks

"Implementing a nested drawer and appbar design using Material UI, along with incorporating tabs within

Leveraging Object.assign for updating fields in Firebase documents

Creating a PEG Grammar that can match either a space-separated or comma-separated list

Identifying Labels in ThreeJS

Calling components may result in a race condition

React Router Link Component Causing Page Malfunction

Updating reactive form fields with patched observable data in Angular

An error has occurred in the callback function for the watcher "function () { return this._data.$$state }": "Error: [vuex] It is forbidden to modify the vuex store state outside of a mutation"

Unable to access this context in Firefox debugger after promise is returned

Script to pop up cancel alert box

I keep encountering the error message "ReferenceError: window is not defined" in Next.js whenever I refresh the page with Agora imported. Can someone explain why this is happening?

Utilizing Angular's web architecture involves nesting components and concealing them with the ng-hide directive

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

TS2307 Error: The specified module (external, private module) could not be located

It appears that React is not successfully transferring props to another component

Navigating between socket.io and express using while loops