Collection-repeat shows 1 record, tons loaded


#1

Hey people, I am using an ionic list and an angular-google-map in one view, i change the z-index so they don’t overlapse but the output of the list are the markers on the map, and i want to be able to switch between them real fast so the map doesn’t have to reload. the map looks great but I just can’t get collection-repeat to function properly. at first I used a normal list which gave me no trouble, but now i’m looking at 10.000+ markers and the normal list becomes laggy so I have to switch. this is my code.

<ion-header-bar class="bar-stable">
      <div ng-if="selection == 'map'">
      	<button ng-click="toggleLeftSideMenu()" class="button button-icon icon ion-search"></button>
				<button class="button button-icon icon ion-navicon-round" ng-click="showList()" ></button>
        <h1 class="title">We Alert Map</h1>
      </div>
  
  <div ng-if="selection == 'list'">
  	<button ng-click="toggleLeftSideMenu()" class="button button-icon icon ion-search"></button>
			<button class="button button-icon icon ion-ios7-location" ng-click="showMap()" ></button>
    <h1 class="title">We Alert list</h1>
  </div>
  
  <div ng-if="selection == 'details'">
			<button class="button button-icon icon ion-ios7-location" ng-click="showMap()" ></button>
    <h1 class="title">We Alert Details</h1>
  </div>
  
</ion-header-bar>
<ion-content scroll="false" ng-show="selection == 'map'" data-tap-disabled="true">

  <google-map center="map.center" draggable="true"  zoom="map.zoom" options="map.options" events="map.events">
  	
    <markers models="map.markers" doCluster="true" doRebuildAll='rebuildAll' 
    coords="'self'"  icon="'icon'" click="'onclicked'" 
    labelContent="'labelContent'"
    labelAnchor="16 33"
    labelClass="labelClass"
    options="'options'"
    idkey='id' clusterOptions='map.clusterOptions'>     
    </markers>
    <marker ng-if="done == '1'" idkey="mmarker.id" options="mmarker.options" coords="mmarker.coords" icon="mmarker.icon"></marker>
  </google-map>
  
  <ion-list ng-show="itemSelected" class="bottom">
    <ion-item class="item item-thumbnail-left" ui-sref="details({alertid:marker.id})">
     	 <img ng-src="{{marker.img}}">
       <span class="title" ng-bind="marker.title"> 
        </span>
        <button class="button button-icon button-clear icon ion-chevron-right"></button>
        <span class="button button-light distance" ng-bind="marker.distance">
        </span>
        <span class="button button-light count ion-chatbox">&nbsp;{{marker.reactiecount}}
        </span>
        <span class="button button-light likecount ion-heart">&nbsp;{{marker.likecount}}
        </span>
    </ion-item>
  </ion-list>
  
</ion-content>
	<ion-content style="{{list}}">
  <div class="list">
    <div class="item item-thumbnail-left" 
    collection-repeat="marker in map.markers"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index) }"
      ui-sref="details({alertid:marker.id})" 
      >
      <img ng-src="{{marker.img}}" >
      <span class="title" ng-bind="marker.title"> 
      </span>
      <button class="button button-icon button-clear icon ion-chevron-right"></button>
      <span class="button button-light distance" ng-bind="marker.distance">
      </span>
      <span class="button button-light count ion-chatbox">&nbsp;{{marker.reactiecount}}
      </span>
      <span class="button button-light likecount ion-heart">&nbsp;{{marker.likecount}}
      </span>
    </div>
  </div>
</ion-content>  `

javascript code:

.controller('AlertsCtrl', function($scope,$http, $ionicLoading, currentLocation, $ionicScrollDelegate, $filter,$rootScope ,$timeout) {

$scope.selection = 'map';
$scope.list = 'z-index : -1;';
$scope.showMap = function(){
	$scope.selection = 'map';
	$scope.list = 'z-index : -1;';
};

$scope.showList = function(){
	$scope.selection = 'list';
	$scope.list = 'z-index : 2;';
};
$scope.showDetails = function(id){
	$scope.itemSelected = false;
	$scope.marker = $scope.map.markers[id];
	$scope.selection = 'details';
	$scope.list = 'z-index : -1;';
};

$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return "100px";
  };
	$scope.getItemWidth = function(item) {
    return '100%';
  };
	
	var icon = {
	url: 'img/marker_red.png', // url
	scaledSize: new google.maps.Size(36.5, 61), // size

};
if($rootScope.lat != undefined){
	$scope.lat = $rootScope.lat;
	$scope.long = $rootScope.lon;
	$rootScope.lat = undefined;

}else{
	$scope.lat = currentLocation.lat
	$scope.long = currentLocation.long
}


angular.extend($scope, {
	map : {
		center : {
			 latitude: $scope.lat,
			 longitude: $scope.long,
		},
		options : {
			zoomControl:true,
			mapTypeControl: false,
			streetViewControl:false,
			optimized: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			styles: $rootScope.myStyles 
		},
		zoom : 15,
		events: {
			idle:function (map) {
				$scope.rebuildAll=false;
				showMarkers(map)
			},
			click:function() { $scope.itemSelected = false; }
		},
		clusterOptions: {
			minimumClusterSize : 5
		}
	}
});

function removeSelected(){
	$scope.$apply(function(){
		
	});
}
$scope.map.markers = [];
var i = "0";
function showMarkers(map){
	//$scope.rebuildAll=false;
	
	var bounds = map.getBounds();
	var ne = bounds.getNorthEast();
	var sw = bounds.getSouthWest();

	// Call you server with ajax passing it the bounds
	
	$http({method: 'GET', url: '****/'+ne+'/'+sw}).
		success(function(data, status, headers, config) {
			
			
			//$scope.markers.push(marker);
			// To add the marker to the map, use the 'map' property

			angular.forEach(data,function(value,key){
				var found = $filter('filter')($scope.map.markers,{'id': value[3]},true)
				if (!found.length) {
					var from = new google.maps.LatLng(currentLocation.lat, currentLocation.long);
					var to = new google.maps.LatLng(value[1],value[2]);
					var dist = google.maps.geometry.spherical.computeDistanceBetween(from, to);
					// To add the marker to the map, use the 'map' property
					var km = dist / 1000;
					if(km > 1){
						var dist =(Math.round(km) + " km"); 
					}else {
						var dist =(dist.toFixed(0) + "m"); 
					}// 1613.8 km
					var unfilterd = value[4];
					var date = new Date(unfilterd.replace(/-/g,"/"));
					
					$scope.map.markers.push({
						id: value[3],
						latitude: angular.fromJson(value[1]),
						longitude: angular.fromJson(value[2]),
						icon: icon,
						labelContent : dist + '<br />'+$filter('date')(date,'d-M'), 
						labelClass: "labels",
						title : value[0],
						distance : dist,
						img : '***'+value[7]+'_thumb.jpg', 
						reactiecount : value[5],
						likecount : value[6],
						options: {
							animation: 2
						},
						onclicked: function(){
							markerClicked(this);
						}
					});
				
				}
			});
			if(i == "0"){
			$scope.addMyLocation();
			}
			i++;
			
		}).
		error(function(data, status, headers, config) {
		// called asynchronously if an error occurs
		// or server returns response with an error status.
	});
}
$scope.mmarker = {};
var myicon = {
	url: 'img/pointer.png', // url
	scaledSize: new google.maps.Size(40, 45), // size
};
$scope.addMyLocation = function() {
	$scope.done = '1';
	$scope.mmarker = {
		id: '0',
		coords : {
			latitude: currentLocation.lat,
			longitude: currentLocation.long
		},
		icon: myicon,
		options: {
			zIndex : $scope.map.markers.length + 1,
			optimized: false,
			animation: 2
		}
	};
	
}


function markerClicked(marker) {
	var marker = marker.model;
	$scope.$apply(function(){
		$scope.selected = "";
		$scope.itemSelected = true;
		
		marker.options = {animation:1};
		$timeout(	
			function cancelAnimation(){
				marker.options = {animation:0};
		}, 750); 
		
		
		$scope.marker = marker;
	});
  }
	

	
})

#2

I heared something about making an angular service/directive that could handle the data of 2 pages, but i’m not sure how to approach that and I think the map will still have to reload