I'm quite new to AngularJS but it's absolutely perfect for my project.
Here's my problem:
My customer has a static coded map (not google). On this map, we have 15 clothing reseller (hardcoded).
My json file:
[
{
"id": "2",
"name": "Laden Dortmund",
"zip": 12345,
"stadt": "Dortmund",
"land": "DE",
"left": "200px",
"top": "300px"
},
{
"id": "1",
"name": "Laden Unna",
"zip": 45568
"stadt": "Unna",
"land": "DE",
"left": "250px",
"top": "400px"
}
]
and so on...
With "left" and "top" I'm marking my map with a marker:
<div class="map" ng-controller="DealerDetailListCtrl">
<a class="marker" id="{{marker.id}}" style="left:{{marker.left}};top:{{marker.top}}" ng-repeat="marker in dealer"></a>
</div>
This is working good for ALL of the entries.
Now our customer wants a postal code search for the entries. Like:
- Reseller1 (Postal Code: 45525) -> Shall be placed in this region of the map.
- Reseller2 (Postal Code: 12345) -> Shall be placed in region xx of the map.
and so on.
What I need is:
Is it possible with Angular JS to have a search box like this:
<input type="text" name="postalcode" class="postalcode" ngRequired>
and to search for (in example) "45525" and I get all markers that are +/- within this postal code?
Maybe every entry will get two new nodes "RangeStart" (Start:40000") and "RangeEnd"(End: 50000") and if I search for "45525" all entries will be displayed, where the search term ins withing the range.
Is this possible?
I was baking an apple pie so I couldn't get back with you quicker, but this is possible with a custom filter as you mentioned in your comment.
myApp.filter("zipFilter", function() { return function(markers, zipCode) {
var retMarkers = [];
var lowRange = parseInt(zipCode, 10) - 1000;
var highRange = parseInt(zipCode, 10) + 1000;
// console.log('low: ' + lowRange);
// console.log('high: ' + highRange);
// loop through all the markers
for(var i = 0, len = markers.length; i < len; ++i) {
var singleMarker = markers[i];
// if the marker falls within the range (+/- 1000)...
if(singleMarker.zip >= lowRange && singleMarker.zip <= highRange) {
retMarkers.push(singleMarker);
}
}
return retMarkers;
}});
See it working online here http://jsfiddle.net/CWcxL/7/ and try typing in "44100" and see how it filters out the results based on a range of zip codes (in this case, +/- 1000 from whatever was entered).
Best of luck!