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). 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 e 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!

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.). 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 e 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!

• javascript
• angularjs

1 Answer 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 ing 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.