Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders

aaronksaunders/Ionic-List-Infinite-scroll-with-button-bar-&-google-map.markdown

Created April 27, 2014 02:53
Show Gist options
  • Save aaronksaunders/11336581 to your computer and use it in GitHub Desktop.
Save aaronksaunders/11336581 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by aaron k saunders.
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive with infinite scrolling</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script data-require="[email protected]" data-semver="0.3.1" src="http://pasvaz.github.io/bindonce/javascripts/bindonce-0.3.1/bindonce.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en&v=3.14"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view title="The 411 Eats">
<header class="bar bar-header bar-positive">
<h1 class="title">Ionic Infinite Scroll with {{items.length}} items</h1>
</header>
<!-- the button an search bar -->
<ion-pane style="top:46px; height:80px">
<div class="item item-input-inset" ng-show="true">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" id="searchTxt" name="searchTxt" placeholder="enter text" >
</label>
<button class="button button-small" ng-click="cancelClicked()">
Cancel
</button>
</div>
<div class="button-bar item" ng-show="true">
<a class="button " id="showMapBtn" ng-click="showMap($event)">
Near Me
</a>
<a class="button " id="showTrucksBtn" ng-click="showTrucks($event)">
Display List
</a>
</div>
</ion-pane>
<!-- the map view -->
<ion-pane ng-show="showMapView" style="top:184px">
<div id="map"></div>
MAP GOES HERE
</ion-pane>
<!-- LIST VIEW -->
<ion-content has-header="false" style="top:184px">
<ion-list ng-if="showTruckView">
<ion-item bindonce ng-repeat="item in items"
item="item-text-wrap"
href="#/item/{{item.id}}" class="item-icon-right">
<i class="icon ion-ios7-arrow-forward icon-accessory" ></i>
Item&nbsp;<span bo-bind="item.id"></span>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
</body>
</html>
Raw
Ionic-List-Infinite-scroll-with-button-bar-&-google-map.markdown
Raw
script.js
angular.module('ionicApp', ['ionic', 'pasvaz.bindonce'])
.controller('MyCtrl', function($scope) {
$scope.showMap = function() {
$scope.showMapView = true;
$scope.showTruckView = false;
initializeMap();
}
$scope.showTrucks = function() {
$scope.showMapView = false;
$scope.showTruckView = true;
}
$scope.itemButtons = [
{
text: 'Edit',
type: 'button-assertive',
onTap: function(item) {
alert('Edit Item: ' + item.id);
}
},
{
text: 'Share',
type: 'button-calm',
onTap: function(item) {
alert('Share Item: ' + item.id);
}
}
];
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.loadMore = function() {
var data = [];
var l = $scope.items.length
console.log("***loadMore was called...");
for ( var i = l; i < l+20; i++) {
data.push({id: i});
}
$scope.items = $scope.items.concat(data);
$scope.$broadcast('scroll.infiniteScrollComplete');
};
function initializeMap() {
try {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(38.89, -77.03),
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
disableDefaultUI: true
};
if (!$scope.map) {
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
infoWindow = new google.maps.InfoWindow();
}
setTimeout(function () {
google.maps.event.trigger($scope.map, "resize");
}, 100);
} catch (EE) {
alert(EE);
}
}
$scope.items = [];
$scope.loadMore();
initializeMap();
});
Raw
style.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
#map { height: 400px; width:'100%'}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment