Question

以下是我的代码中的fiddle链接。当我输入 MAX PRICE 输入手动过滤器工作正常。但是当我移动最大价格滑块时，过滤器不起作用。这可能是什么原因？

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

#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
{
	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://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>
		
	
</div>

Answer 1

请参阅此fiddle。

主要的变化是：

slide: function(event, ui) {
    $scope.maxPrice=ui.value;
    $scope.$apply();
}

Angularjs Filter写入manuel输入是工作但滑块不工作

1 个答案: