Angularjs 在地图上过滤多个复选框

Question

我想在项目中根据房间内的素材进行筛选。例如：如果选中电视复选框，则在电视上显示房间。如果选中电视和 wifi 复选框，则只列出既有电视又有 wifi 的房间。我的示例显示的是电视，但当我按下 wifi 按钮时，即使没有 WiFi，带电视的房间仍会列出。

这是：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="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></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)">{{ x.prop_Name }}</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>

Answer 1

您只检查是否检查了某些内容，然后将 shouldBeShown 设置为 true 并中断。因此，您使用复选框检查 "OR" 而不是 "AND"。

看看你的$scope.am_en = function()：

for (var i = 0; i < x.length; i++) {
            if (location.amenities.indexOf(x[i]) !== -1) {
                shouldBeShown = true;
                break;
            }
}
return shouldBeShown;

您需要修改您的 if 语句以检查所有已检查的 checkboxes/filters。也许你可以考虑使用二进制信息来提供便利。

示例：

00 = 没有便利设施
01 = 仅 WiFi
10 = 仅电视
11 = 电视和 WiFi

然后你可以存储：

0 白送
1 仅适用于 WiFi
2 仅适用于电视
3 用于电视和 Wifi
...

这将使检查更容易，因为您可以使用模运算符。

Answer 2

使用您当前的脚本，当您 select 2 个元素（如电视和 WiFi）时，您将显示配备电视或 WiFi 的房间。您应该更改您的代码，以便 select 只有有电视和 WiFi 的房间，因此您的内部函数 $scope.ot_Filter 将如下所示：

$scope.ot_Filter = function (location) {
    var shouldBeShown = true;
    for (var i = 0; i < x.length; i++) {
        if (location.amenities.indexOf(x[i]) === -1) {
            shouldBeShown = false;
            break;
        }
    }
    return shouldBeShown;
};

我已经修改了您的脚本，将 WiFi 添加到某个位置，here

Angularjs 在地图上过滤多个复选框

Angularjs filter multiple checkbox on map

angularjs

checkbox

angularjs-filter