Skip to content

Instantly share code, notes, and snippets.

@pablinhob

pablinhob/gist:9170598

Last active August 29, 2015 13:56
Show Gist options
  • Save pablinhob/9170598 to your computer and use it in GitHub Desktop.
Save pablinhob/9170598 to your computer and use it in GitHub Desktop.
Download ZIP
Lectura JSON e filtros básicos en angular
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.css" title="" type="" />
<script data-require="[email protected]" src="lib/angular.min.js" data-semver="1.1.4"></script>
<script type="text/javascript" src='http://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.js' charset="utf-8"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="lib/marker_clusterer/marker_clusterer.js"></script>
<style>
.active {font-weight: bold;}
</style>
<script type="text/javascript">
HallSt = angular.module('HallSt',['uiSlider']);
HallSt.controller('mapaController', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
$scope.hotels = [];
$scope.hotels_filtered = [];
$scope.hotels_filtered_ids = [];
// map and clustering
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(
41.376690, 2.150519
)
};
$scope.mapa = new google.maps.Map(document.getElementById('mapa'), mapOptions);
$scope.init_clusterer = function() {
$scope.cluster_manager = new marker_clusterer({
map: $scope.mapa,
json_data: $scope.hotels,
data_structure: {id: 'idhotel', lat: 'lat', lng: 'lon'},
zoom_range : [11,17],
//cluster_radious: 10
hover_event: function(marker, data) {}
});
}
$http.get('hotel.json').then(function(res){
$scope.hotels = $scope.hotels_filtered = res.data.hotels;
$scope.init_clusterer();
});
// filters and change filters
$scope.filters = {
price_range: {low:30, high:150},
stars: {one:false, two:false, three:false, four:false, five:false}
}
$scope.switch_star = function(star) {
switch (star)
{
case "one":
$scope.filters.stars.one = ($scope.filters.stars.one)? false: true;
break;
case "two":
$scope.filters.stars.two = ($scope.filters.stars.two)? false: true;
break;
case "three":
$scope.filters.stars.three = ($scope.filters.stars.three)? false: true;
break;
case "four":
$scope.filters.stars.four = ($scope.filters.stars.four)? false: true;
break;
case "five":
$scope.filters.stars.five = ($scope.filters.stars.five)? false: true;
break;
}
}
// Eventos cambia valores de filtros
$scope.$watch('[filters]', function () {
$scope.hotels_filtered = [];
$scope.hotels_filtered_ids = [];
angular.forEach($scope.hotels, function(value, key){
if( parseInt(value.minprice) > $scope.filters.price_range.low &&
parseInt(value.minprice) < $scope.filters.price_range.high &&
(
($scope.filters.stars.one && parseInt(value.stars) == 1) ||
($scope.filters.stars.two && parseInt(value.stars) == 2) ||
($scope.filters.stars.three && parseInt(value.stars) == 3) ||
($scope.filters.stars.four && parseInt(value.stars) == 4) ||
($scope.filters.stars.five && parseInt(value.stars) == 5) ||
(!$scope.filters.stars.one && !$scope.filters.stars.two && !$scope.filters.stars.three && !$scope.filters.stars.four &&!$scope.filters.stars.five)
)
)
{
$scope.hotels_filtered.push( value);
$scope.hotels_filtered_ids.push(value.idhotel);
}
$scope.cluster_manager.filter($scope.hotels_filtered_ids);
//console.debug($scope.filters.price_low , value.minprice, $scope.filters.price_high, entra);
});
}, true);
}]); // close mapaController
</script>
</head>
<body ng-app="HallSt">
<div ng-controller="mapaController">
<div>
<div>Estrellas:</div>
<input type="button" value="*" ng-click="switch_star('one')" ng-class="{ active: filters.stars.one == true }">
<input type="button" value="**" ng-click="switch_star('two')" ng-class="{ active: filters.stars.two == true }" >
<input type="button" value="***" ng-click="switch_star('three')" ng-class="{ active: filters.stars.three == true }">
<input type="button" value="****" ng-click="switch_star('four')" ng-class="{ active: filters.stars.four == true }">
<input type="button" value="*****" ng-click="switch_star('five')" ng-class="{ active: filters.stars.five == true }">
</div>
<div>
<div>Min price beetwen {{filters.price_range.low | currency:"$"}} and {{filters.price_range.high | currency:"$"}}</div>
<slider floor="20" ceiling="160" step="5" precision="0" ng-model-low="filters.price_range.low" ng-model-high="filters.price_range.high" ></slider>
</div>
<div id="mapa" style="width:600px;height:600px;float:right;"></div>
<table>
<tr ng-repeat="hotel in hotels_filtered">
<td>{{hotel.city}}</td>
<td>{{hotel.name}}</td>
<td>{{hotel.stars}}</td>
<td>{{hotel.minprice | currency:"$"}}</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment