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

Django 1.6: Edit Profile: column username is not unique

python django profile

I'm trying to create edit user profile functionality. But I get the following error. I feel like it's trying to create a new user instead of editing the existing one. So that might result into user...

how to dynamically add a QWidget based to QGraphicsScene?

c++ qt4

I want to add a QWidget based class(composed by buttons and labels an so on...) to my QGraphicScene scene in a special position and respecting the graphic style of my scene.?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.