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

## 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="bindonce@0.3.1" 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>

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

      
    Raw
  

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

An Ionic list with infinite scroll
A Pen by aaron k saunders on CodePen.
License.

  
## 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();


});

## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
#map { height: 400px; width:'100%'}
	<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="bindonce@0.3.1" 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 <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>
	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();


	});
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}
	#map { height: 400px; width:'100%'}