0
ここには私のコードのfiddleリンクがあります。私がMAX PRICEを入力すると、手動入力フィルタが正常に動作します。しかし、私は最大価格のスライダをシフトすると、フィルタは動作しません。これの理由は何でしょうか？Angularjsフィルター書き込みのmanuel入力は機能しますが、スライダーは機能しません
angular.module('hotelApp', [])
.controller('ContentControler', function ($scope, $timeout) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
$scope.names = [{
prop_Name: 'Location 1',
prop_Addr: '123 Easy Street',
prop_Price: 325.00,
prop_Dist: .25,
prop_Desc: 'This is the First Location.',
lat: 43.7000,
long: -79.4000
}, {
prop_Name: 'Location 2',
prop_Addr: '456 Easy Street',
prop_Price: 114.00,
prop_Dist: 3,
prop_Desc: 'This is the Second Location.',
lat: 40.6700,
long: -73.9400
}, {
prop_Name: 'Location 3',
prop_Addr: '789 Easy Street',
prop_Price: 98.00,
prop_Dist: 4,
prop_Desc: 'This is the Third Location.',
lat: 41.8819,
long: -87.6278
}, {
prop_Name: 'Location 4',
prop_Addr: '1011 Easy Street',
prop_Price: 150.00,
prop_Dist: 1,
prop_Desc: 'This is the Fourth Location.',
lat: 34.0500,
long: -118.2500
}, {
prop_Name: 'Location 5',
prop_Addr: '1213 Easy Street',
prop_Price: 250.00,
prop_Dist: 7,
prop_Desc: 'This is the Firth Location.',
lat: 36.0800,
long: -115.1522
}];
$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');
}
//Max Price
$scope.maxPrice = 500;
$scope.pmaxFilter = function (location) {
return parseInt(location.prop_Price) <= parseInt($scope.maxPrice);
};
$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);
});
$(function() {
$("#slider-range").slider({
range: "min",
value: 500,
step: 10,
min: 0,
max: 500,
slide: function (event, ui) {
$("#amount2").val(ui.value);
}
});
$("#amount2").change(function() {
$("#slider-range").slider("value",this.value);
});
\t \t
\t \t
\t });#map {
height: 420px;
width: 600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
#total_items
{
\t margin:0px auto;
\t padding:0px;
\t text-align:center;
\t color:#0B173B;
\t margin-top:50px;
\t border:2px dashed #013ADF;
\t font-size:20px;
\t width:200px;
\t height:50px;
\t line-height:50px;
\t font-weight:bold;
}
#amount
{
\t color:#DF7401;
\t font-size:18px;
\t font-weight:bold;
}
#slider-range
{
\t margin:0px auto;
\t padding:0px;
\t text-align:center;
\t width:500px;
}<script src="https://code.jquery.com/jquery-1.12.4.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://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.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">
<p id="amount"></p>
<div id="slider-range"></div>
<h2>Filters</h2>
Min Price : <input type="text" id="amount1" name="amount1" value="10">
Max Price : <input type="text" id="amount2" name="amount2" ng-model='maxPrice' value="500">
<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)">{{ x.prop_Desc + ', ' + x.prop_Addr + ', ' + '$' + x.prop_Price }}</li>
</ul>
\t \t
\t
</div>