AngularJS existing ng-repeat filter

Question

Please see my question here.....

AngularJS DateRange - how to include the end date

How would I go about adding this functionality into an existing ng-repeat area setup? The current filtering is only done via a single text box - search. The date from and date to fields need to be added to the filter.

Really appreciate the help.

NG-REPEAT

<div class="itemlist" data-token="{{data.token}}" ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" data-name="{{data.customerName}}" ng-click="eventHandler(data, $event)"> 

SEARCH BOX

<input type="text" ng-model="search" ng-change="filter()" class="form-control" placeholder="Search for...">

I've tried altering NG-REPEAT to the following but it doesn't work, the model datef/datet input boxes aren't shown on this example...but they do exist.

<div class="itemlist" data-token="{{data.token}}" ng-repeat="data in filtered = (list | filter:search | myfilter:{from: datef, end: datet} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" data-name="{{data.customerName}}" ng-click="eventHandler(data, $event)"> 

Answer 1

I think the problem is how you're adding your filters to the ng-repeat. This syntax is a bit unfamiliar to me but I got it working in this codepen

The core of this is understanding the expression you're trying to execute on. I asked a comment:

Am I correct in my understanding that you want to a) filter by a date range (starDate thru endDate) & b) you want to filter that 'dated' data set based on a key/value search

To which you replied:

That's exactly it...

That being said, the best way to understand the filters and the expression is to think of them as being a chain of logic bits. So for this:

listData | dateRange:startDate:endDate | filter:filterCriteria

is doing this:

1. gets the source listData
2. passes the resulting array to the dateRange filter you're defining
3. passes the resulting array to the built-in angular filter filter (they poorly named that btw)

The last bit of this is taking the result of that logic chain and passing it to the ng-repeat process. So in this case:

ng-repeat="obj in filtered = listData | range:startDate:endDate | filter:filterBy"

note

In my example, I didn't add the pagination or the orderBy filter. But your initial filtered value that's contained inside parenthesis...

(list | filter:search | myfilter:{from: datef, end: datet} | orderBy : predicate :reverse)

... can probably be removed from the parenthesis because you're just passing the return value of each filter on down the chain of filters.