我想根据项目中房间的材料进行过滤。例如:如果选中电视复选框,则显示电视上的房间。如果选中电视和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);
});
&#13;
#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;
}
&#13;
<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>
&#13;
答案 0 :(得分:1)
使用当前脚本,当您选择2个元素(如电视和WiFi)时,您将显示具有电视或 WiFi的房间。您应该更改代码,以便仅选择具有电视和 WiFi的房间,因此您的内部功能<script>
recordingslist = document.getElementsByClassName("recordingslist")[0];
</script>
将如下所示:
$scope.ot_Filter
我修改了您的脚本,将WiFi添加到某个位置here
答案 1 :(得分:0)
您只检查是否检查了某些内容,然后将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语句以检查所有选中的复选框/过滤器。也许你可以考虑将二进制信息用于设施。
示例:
然后你可以存储:
这样可以更方便地检查,因为您可以使用模运算符。