目前,我可以通过将代码绑定到名为cities的$ scope属性,使我的代码显示从json文件获取的信息。我通过将其设置为jquery中的数组(称为结果)来完成此操作。第一次显示它是完美的。问题是当我尝试通过选择选项框上的选项来过滤结果时。数组在jquery中得到了更新,但似乎$ scope.cities的值保持不变。理想情况下,每当我在jquery中调用initMap时,$ scope.cities都会被“刷新”。
我认为scope.apply()是我的问题的解决方案,但它似乎没有帮助。我也听说过使用jquery和angular是一个坏主意。有没有办法在控制器/角度内编写相同的功能来解决这个问题?当我试图在那里写它时,我无法使用谷歌地图api功能。也许我必须将它们作为依赖项注入?
<select name="Min Price" class="custom-select">
<option>Min Price</option>
<option>500+</option>
<option>1750+</option>
<option>2000+</option>
<option>2500+</option>
</select>
<div data-ng-repeat="home in cities">
<div class="results-homes" data-toggle="modal" data-target="#resultsModal">
<span data-ng-style="{'background-image':'url(' + home.picture + ')'}"></span>
<div>
<p>{{home.type}} <span class="pull-right">{{home.beds}} bds/{{home.baths}} ba/{{home.sqft}} sqft</span>
</p>
<p>{{home.price}}/mo<span class="pull-right">{{home.address}}</span></p>
</div>
</div>
</div>
<script>
$(function () {
$.ajax({
type: 'GET',
url: 'app.json',
dataType: 'json',
success: function (data) {
var minPrice = 0;
$(".custom-select").on("change", function (e) {
var target = $(e.target);
var targetValue = target.val();
switch (target.attr("name")) {
case "Min Price":
if (targetValue !== "Min Price") {
minPrice = parseFloat(targetValue);
} else {
minPrice = 0;
}
break;
}
initMap();
});
function initMap() {
results = [];
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45.397,
lng: -70.644
},
zoom: 5
});
for (var i = 0; i < data.homes.length; i++) {
var dataBeds = parseFloat(data.homes[i].beds);
var dataBaths = parseFloat(data.homes[i].baths);
var dataPrice = parseFloat(data.homes[i].price);
var dataSqft = parseFloat(data.homes[i].sqft);
var lat = data.homes[i].lat;
var long = data.homes[i].long;
var address = data.homes[i].address;
var myLatLng = {
lat: parseInt(data.homes[i].lat),
lng: parseInt(data.homes[i].long)
};
if (minPrice <= dataPrice) {
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
results.push(data.homes[i]);
}
}
}
initMap();
}
});
});
</script>
<script>
var app = angular.module('realEstateApp', []);
app.controller('MainController', ['$scope', "getResults", function ($scope, getResults) {
window.setTimeout(function () {
$scope.cities = results;
$scope.$apply("cities", results);
}, 200);
}]);
</script>
这是我的角度代码。
{
"homes": [
{
"address": "133 Parker street",
"type": "apartment",
"beds": "2",
"baths": "4",
"price": "2000",
"city": "Miami",
"state": "FL",
"picture": "http://www.directcommercialfunding.com/images/apartment-building-loans.jpg",
"sqft": "2000",
"lat": "49.735495",
"long": "-73.910745"
},
{
"address": "857 17th street",
"type": "apartment",
"beds": "3",
"baths": "2",
"price": "800",
"city": "Dallas",
"state": "TX",
"picture": "http://i2.interiorim.com/uploads/original/201606/27/interiorim.com_future_light_Dream_house_lifestyle_11619.jpg",
"sqft": "3000",
"lat": "48.735496",
"long": "-73.910746"
}]}
很抱歉,如果我包含太多代码,我也会对其中的某些部分进行简化,以便于阅读。为了清楚起见,我希望使用var结果更新$ scope.cities。所以如果var results = [1,2,3],那么$ scope.cities = [1,2,3]。但如果有人要更改选择框以使结果= [4,5,6],则$ scope.cities也会更改为[4,5,6]。