How can I add events to angularjs when filters execute?

Question

I have a list of tasks and each task has an associated address. I am putting markers on a map when the page loads so our team gets a visual representation of where the tasks should occur. We also have some extensive filtering on the page. How can I update the map markers anytime the filtered data changes?

<tr ng-repeat="detail in filteredDetails = (details|filterByStatus:page.statusFilter|filterDetailByDate:page.dateFilterFrom+'.'+page.dateFilterThrough|filter:{ColorStatus: page.colorFilter}|filter:{MilestoneIdTaskId: page.milestoneTaskFilter}|filter:{CustomerId: page.storeFilter}|filter:{RepId: page.techFilter}|filter:page.detailFilter)">
</tr>

Basically, anytime the filters execute and the table data is refreshed I want to call my code that puts the markers on the map and pass in the filteredDetails as the parameter.

there should be an event on whatever is triggering the filtering change, like a change event on a search input. given no other option, DOM Mutation events will fire when the table markup changes. — dandavis
– dandavis, Commented Jul 30, 2013 at 18:30
I'm not following you there. Each of these filters is based on different text box or dropdown selections. What I really want is to be able to execute my marker code when filteredDetails is changed. — Mike Roosa
– Mike Roosa, Commented Jul 30, 2013 at 19:36
i'm saying there might not be any event on filtering, i didn't see one, but you can correlate other events that trigger the filter change to also execute your marker code. later, there is a table modification event that will be raised just after a filter change. finally, you can use a custom filter function to call the marker maker. something like function filtAll(a){ clearTimeout(filtAll.tim);filtAll.tim=setTimeout(updateMarker,100); return a; } — dandavis
– dandavis, Commented Jul 30, 2013 at 19:45

jcubic · Accepted Answer · 2014-07-04 20:14:39Z

1

Just write filter that you add at the end and inside you run your refresh:

ng-repeat="detail in filteredDetails = (details|...|filter:page.detailFilter|refresh)"

.filter('refresh', function() {
  return function(input) {
      //refresh the map. input will be filteredDetails
  });
});

answered Jul 4, 2014 at 20:14

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

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

Collectives™ on Stack Overflow

How can I add events to angularjs when filters execute?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related