Dayle Salmon Dayle Salmon - 5 months ago 29
Javascript Question

AngularJS - ng-repeat not updating to correct results using filters

I have an ng-repeat like so:

<div class="event block block--fullwidth nga-default nga-stagger nga-fade" data-ng-repeat="event in (filteredEvent = (Events.events | filter:Events.query | myDateRange:Events.dateFrom:Events.dateTo:Events.specificDate | orderBy:Events.orderEvent)) | limitTo:Events.limit"></div>


And I also have a few search filter boxes at the top of the page(inputs/select boxes) that the user can use to filter their search results. An example of one is the search box(as below:

<input id="txt1" class="input--fullwidth" type="text" data-ng-model="Events.query.TotalLocation" placeholder="Enter a region, place or postcode" data-ng-change="Events.limit = 6" />


It kind of works, in the sense that the results update as you start typing in to the search box. However, when you press backspace so the search box is empty, it doesn't go back to the original search length(it could be 992 on first load but end up on 940 when you backspace). It seems to do this with many of my search filters.

I just can't work it out, and thanks for any help.

Answer

For some reason the solution was really weird. By adjusting my ng-repeat to include a data attr that had the ng-repeat variable in seemed to make it work. E.g.

<div class="event block block--fullwidth nga-default nga-stagger nga-fade" data-ng-repeat="event in (filteredEvent = (Events.events | filter:Events.query | myDateRange:Events.dateFrom:Events.dateTo:Events.specificDate | orderBy:Events.orderEvent)) | limitTo:Events.limit" data-var="{{filteredEvent.length}}"></div>