So currently, I can make my code display the information it gets from a json file by binding it to a $scope property called cities. I did this by setting it equal to an array in jquery called results. Displaying it the first time works perfectly. The problem is when I try to filter the results by picking on option on a select box. The array gets updated like it should in jquery, but it seems like the value of $scope.cities stays the same. Ideally, $scope.cities would be "refreshed" every time I call initMap in jquery.
I think scope.apply() is the solution to my problems, but it doesn't seem to help. I've also heard that using jquery with angular is a bad idea. Is there a way I could write the same function inside the controller/angular to fix this? When I tried to write it there, I couldn't use the google maps api functions. Maybe I have to inject them as dependencies?
<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>
Heres the select box and the part that's supposed to be repeated for the list of results.
<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>
Here's my angular code.
{
"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"
}]}
and here's the json file
Sorry if I included too much code, I also simplified certain parts of it to make it easier to read. Just to be clear, I want $scope.cities to update with var results. so if var results = [1,2,3], then $scope.cities = [1,2,3]. But if someone were to change the select box to make results = [4,5,6], $scope.cities would also change to [4,5,6].
