2012-12-30 2 views
2

저는 AngularJS에 새로 소개되었지만 프로젝트에 절대적으로 적합합니다.AngularJS - 범위 검색

내 문제는 다음과 같습니다.
고객이 Google이 아닌 정적 코딩 된지도를 가지고 있습니다. 이지도에는 15 명의 의류 대리점 (하드 코드 된)이 있습니다.

내 JSON 파일 :

[ 
{ 
    "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" 
} 
] 

등등 ... "최고" "왼쪽"과 함께
내가 마커로 내지도 표시 해요 :

<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> 

이것은이다 모든 항목에 유용합니다.
고객이 우편 번호 검색을 원합니다. Like :
- Reseller1 (우편 번호 : 45525) ->지도의이 지역에 배치해야합니다.
- Reseller2 (우편 번호 : 12345) ->지도의 지역 xx에 위치해야합니다. 등등. 각도 JS이 같은 검색 상자 가지고와
가 가능 :

은 내가 필요한 것은

<input type="text" name="postalcode" class="postalcode" ngRequired> 

및 "45525"(예)를 검색하고 나는 모든 마커를 얻을 이 우편 번호 내에서 +/-입니까?
어쩌면 모든 항목에 두 개의 새 노드 "RangeStart"(시작 : 40000 ") 및"RangeEnd "(끝 : 50000")가 표시되고 "45525"를 검색하면 모든 항목이 표시됩니다. 범위.

이것이 가능합니까?

+0

맞춤 필터를 사용했을 가능성이 있습니까? 누구 아이디어? – Marek123

+1

"Laden Dortmund"의 지퍼가 23456이되도록 JSON의 각 표식 객체에 "zip"속성을 추가 하시겠습니까? –

+0

젠장, 나는이 행을 실수로 삭제했다. json 항목은이 예제보다 훨씬 길다. ZIP 속성이 있습니다 ... (지금 편집 할 것입니다) – Marek123

답변

2

나는 사과 파이를 굽고 있었기 때문에 더 빨리 대답 할 수 없었지만, 귀하의 의견에 언급 한대로 사용자 정의 필터로 가능합니다.

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; 
}}); 

여기 온라인 http://jsfiddle.net/CWcxL/7/ 작업을 참조하십시오 (입력 된 어떤에서 +/-, 1000이 경우) "44100"를에 입력 시도는 우편 번호의 범위를 기반으로 결과를 필터링하는 방법을 참조하십시오.

행운을 빈다.

+1

대단합니다! 그걸로 일할 수 있어요! 고맙습니다. – Marek123

+0

잘 작동합니다. 나는 그것을 약간 수정했다. "국가"드롭 다운을 필터에 추가하는 것이 가능합니까? 우편 번호에 대한 입력과 국가에 대한 "DE, AT, CH"가있는 드롭 다운이 있습니다. 국가 모델을 매개 변수로 필터에 쉽게 추가 할 수 있습니까? – Marek123

+0

그리고 "TypeError : 변수"markers "의 'undefined'속성 'length'을 읽을 수 없습니다. – Marek123