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)">

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? — jusopi
– jusopi, Commented Mar 3, 2016 at 16:56
That's exactly it! The JSON list currently contains a dated field, so that field needs to sit inside the specified date range. Then, search key/value on other fields. — Rob
– Rob, Commented Mar 3, 2016 at 16:59

jusopi · Accepted Answer · 2016-03-03 17:27:59Z

0

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:

gets the source listData
passes the resulting array to the dateRange filter you're defining
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.

answered Mar 3, 2016 at 17:27

jusopi

6,8133 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

Thanks, you were absolutely right that it was down to the order of applying the filters. I think my problem is that I misunderstood the built-in 'filter' property and was trying to apply my filter on top of that.

Collectives™ on Stack Overflow

AngularJS existing ng-repeat filter

1 Answer 1

note

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

note

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related