Are there AngularJS data update callbacks? How do I manually update page when data changes?

All we need is an easy explanation of the problem, so here it is.

I went through the AngularJS tutorial and it’s pretty neat. I’ve also dipped into Backbone and Ember.js (though not totally familiar with either) but I’ve heard lots of praise over AngularJS and I want to see if it will work for me.

I have a site that focuses around a large Google map (think of something like Padmapper.com). Over 2,000 cars that are currently loaded via JSON after page load, and that JSON takes 1-2 seconds to arrive. The map is then populated with markers based on car location. I have a filter form with which the user can filter the cars based on many different attributes (let’s just say color, amount of gas, etc.) Currently submitting this filter form queries the back end with the filters which then returns the filtered cars. This is a huge waste of time.

I’d like to load all the items on initialization, then use the front end to filter as they change the values. In the AngularJS tutorial, items appear and disappear as I type in the filter box. Pretty cool. But how do I handle map markers? How can I define a callback function to manually update the map markers once they come in? Do I need to use custom directives somehow? (Still not totally sure what these do…)

I can think of a solution in jQuery, i.e. have an unordered list of the cars, watch it for changes, and hide/show markers as necessary. But I’m trying to move away from jQuery. Any help is appreciated! Thanks!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

In a directive, you could $watch for a change on your list of cars and reapply the markers on your map. I am not familiar with Google Maps programming, but here’s an attempt to illustrate what I talking about: http://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=preview

EDIT:

I found a great way of keeping track of the filtered results:

<tr ng-repeat="item in (filteredcars = (cars | filter: query))">

This create on the fly the variable filteredcars and no need to bind a change event on the input query!

So to recap:

1) You can $watch data for change. But don’t forget the 3rd parameter to tell it is an array.

scope.$watch('myvar', function(newval, oldval) {...}, true);

2) You can create a variable on the fly containing the filtered results of an expression coming from an ng-repeat.

3) Don’t forget to empty the map element before you append child elements, otherwise, the filtered elements won’t appear to be working.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply