AngularJS - Range search

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?

Answers


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!


Need Your Help

Phusion Passenger: Getting 404 on all my applications

ruby-on-rails apache http-status-code-404 passenger

I hadn't used my MacBook for a while to run some local Rails apps, but now they are all showing (apache) 404s. I believe I had updated to Lion and the newest Pref Pane since they last worked. I'm not