mardi 21 mars 2017

Angularjs filter multiple checkbox on map

I want to filter according to the materials in the room in the project. For example: if checked TV checkbox show the rooms on the TV. if checked tv and wifi checkbox just list rooms that are both TV and WiFi. My example shows the TV ones but when I press the wifi button the rooms with TV are still listed even though it is not WiFi.

This is: Fiddle

 angular.module('hotelApp', [])
    .controller('ContentControler', function ($scope, $timeout) {

    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    $scope.location_name = "";
    $scope.names = [{
        prop_Name: 'Location 1',
        lat: 43.7000,
        long: -79.4000,
        amenities: '3'
    }, {
        prop_Name: 'Location 2',
        lat: 40.6700,
        long: -73.9400,
        amenities: '2'
    }, {
        prop_Name: 'Location 3',
        lat: 41.8819,
        long: -87.6278,
        amenities: '4'
    }, {
        prop_Name: 'Location 4',
        lat: 34.0500,
        long: -118.2500,
        amenities: '2'
    }, {
        prop_Name: 'Location 5',
        lat: 36.0800,
        long: -115.1522,
        amenities: '2, 3'
    }];
    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info) {

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.prop_Name
        });
        marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>';

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

    }

    for (i = 0; i < $scope.names.length; i++) {
        createMarker($scope.names[i]);
    }

    $scope.openInfoWindow = function (e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

//PROBLEM FILTER HERE   
$scope.am_en = function()
{
  x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();
  $scope.ot_Filter = function (location) {
        var shouldBeShown = false;
        for (var i = 0; i < x.length; i++) {
                if (location.amenities.indexOf(x[i]) !== -1) {
                        shouldBeShown = true;
            break;
        }
    }
        return shouldBeShown;
  };
}



    $scope.$watch('nas',
    function (newValue, oldValue) {
        for (jdx in $scope.markers) {
            $scope.markers[jdx].setMap(null);
        }
        $scope.markers = [];
        for (idx in $scope.nas) {
            createMarker($scope.nas[idx]);
        }
    }, true);
});
#map {
  height: 220px;
  width: 400px;
}

.infoWindowContent {
  font-size: 14px !important;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

h2 {
  margin-bottom: 0;
  margin-top: 0;
}
#total_items
{
        margin:0px auto;
        padding:0px;
        text-align:center;
        color:#0B173B;
        margin-top:50px;
        border:2px dashed #013ADF;
        font-size:20px;
        width:200px;
        height:50px;
        line-height:50px;
        font-weight:bold;
}
#amount
{
        color:#DF7401;
        font-size:18px;
        font-weight:bold;
}
#slider-range
{
        margin:0px auto;
        padding:0px;
        text-align:center;
        width:500px;
}
<script src="http://ift.tt/1AWC568"></script>
<link href="http://ift.tt/2o04nLS" rel="stylesheet"/>
<script src="http://ift.tt/2dsPzTA"></script>
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="http://ift.tt/1kov6PA"></script>
<div ng-app="hotelApp" ng-controller="ContentControler">
<div id="map"></div>
    <div id="class" ng-repeat="marker in markers"></div>
    <ul>
        <li ng-repeat="x in nas = (names | filter:{prop_Name:location_name} | filter:pmaxFilter | filter:ot_Filter)"></li>
    </ul>
    
    
<div class="hosting_amenities">
<h3>Filter:</h3>
<input type="checkbox" name="more_filter[]" value="1">WIFI
 <input type="checkbox" name="more_filter[]" value="2">TV
<input type="checkbox" name="more_filter[]" value="3">Cable TV
<input type="checkbox" name="more_filter[]" value="4">Klima 
<button ng-click="am_en();">Submit</button>
</div>



Aucun commentaire:

Enregistrer un commentaire