<html>
  <head>
    <meta charset="utf-8">
    <title>Ionic List Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <title>Infitine Scroll</title>

    <link href="https://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script>
  </head>

  <!-- 
    'listExample' is the name of this angular module (app.js)
    'nav-router' attribute updates the nav-bar title and animations as you navigate
    'animation' attribute sets which type of animations to use
  -->
  <body ng-app="listExample" nav-router animation="slide-left-right-ios7">

    <!-- The nav bar that will be updated as we navigate -->
    <ion-nav-bar 
      class="nav-title-slide-ios7" 
      type="bar-positive" 
      back-button-type="button-icon" 
      back-button-icon="ion-arrow-left-c"></ion-nav-bar>

    <!-- where the content of each page will be rendered -->
    <ion-nav-view></ion-nav-view>


    <!-- 
      Belows are examples of using inline angular templates:
      https://docs.angularjs.org/api/ng.directive:script
    -->
    
    <!--
      This template loads when the the root '/' url is matched (app.js)
      'movies' is a $scope variable which was created in MovieIndexCtrl (controllers.js)
      The MovieIndexCtrl gets data from the MovieService (service.js)
    -->
    <script type="text/ng-template" id="/index.html">
      <ion-view>
      <ion-nav-page title="title">
        <ion-content has-header="true" on-infinite-scroll="loadMore()">
          
          <ion-list>
            <ion-item ng-repeat="movie in movies" href="#/movie/{{movie.id}}" type="item-link">
              {{ movie.title }}
            </ion-item>
          </ion-list>
          <ion-infinite-scroll></ion-infinite-scroll>
        </ion-content>
      </ion-nav-page>
      </ion-view>
    </script>
    
    <!--
      This template loads when the '/movie/:movieId' url is matched (app.js)
      'movie' is a $scope variable which was created in MovieDetailCtrl (controllers.js)
      The MovieDetailCtrl gets data from the MovieService (service.js)
    -->
    <script type="text/ng-template" id="/movie.html">
      <ion-view>
      <ion-nav-page title="title">
        <ion-content has-header="true" padding="true">
          <h1>{{ movie.title }}</h1>
          <dl>
            <dt>Description:</dt>
            <dd>{{ movie.description }}</dd>
          </dl>
          <dl>
            <dt>Released:</dt>
            <dd>{{ movie.released }}</dd>
          </dl>
          <dl>
            <dt>Director:</dt>
            <dd>{{ movie.director }}</dd>
          </dl>
          <dl>
            <dt>Rating:</dt>
            <dd>{{ movie.rating }}</dd>
          </dl>
        </ion-content>
      </ion-nav-page>
      </ion-view>
    </script>


  </body>
</html>
angular.module('listExample', ['ionic', 'ngAnimate'])

.config(function($stateProvider, $urlRouterProvider) {

  // Set up the initial routes that our app will respond to.
  // These are then tied up to our nav router which animates and
  // updates a navigation bar
  $stateProvider.state('indexView', {
    url: '/',
    templateUrl: '/index.html',
    controller: 'MovieIndexCtrl'
  })

  // if the url matches something like /movie/88 then this route
  // will fire off the MovieDetailCtrl (controllers.js)
  .state('movieView', {
    url: '/movie/:movieId',
    templateUrl: '/movie.html',
    controller: 'MovieDetailCtrl'
  });

  // if none of the above routes are met, use this fallback
  $urlRouterProvider.otherwise('/');

})

.controller('MovieIndexCtrl', function($scope, MovieService, $timeout) {
  
  // "MovieService" is a service returning mock data (services.js)
  // the returned data from the service is placed into this 
  // controller's scope so the template can render the data
  $scope.movies = [];
  //$scope.movies = MovieService.all();
  $scope.movies = MovieService.allSync();

  $scope.title = "Completely Random Collection Of Movies";

  // Method called on infinite scroll
  // Receives a "done" callback to inform the infinite scroll that we are done
  $scope.loadMore = function() {
    $timeout(function() {
      $scope.movies.push({
        id: 'tt0114814',
        title: 'Usual Suspects',
        released: '1995',
        description: 'A boat has been destroyed, criminals are dead, and the key to this mystery lies with the only survivor and his twisted, convoluted story beginning with five career crooks in a seemingly random police lineup.',
        director: 'Bryan Singer',
        rating: 8.3
      });
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 1000);
  }
})

// Controller that shows more detailed info about a movie
.controller('MovieDetailCtrl', function($scope, $stateParams, MovieService) {
  // "MovieService" is a service returning mock data (services.js)
  $scope.movie = MovieService.get($stateParams.movieId);
  $scope.title = "Movie Info";
})

.factory('MovieService', function($q, $timeout) {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var movies = [
    {
      id: 'tt0080487',
      title: 'Caddyshack',
      released: '1980',
      description: 'An exclusive golf course has to deal with a brash new member and a destructive dancing gopher.',
      director: 'Harold Ramis',
      rating: 7.2
    },
    {
      id: 'tt0087332',
      title: 'Ghostbusters',
      released: '1984',
      description: 'Three unemployed parapsychology professors set up shop as a unique ghost removal service.',
      director: 'Ivan Reitman',
      rating: 7.8
    },
    {
      id: 'tt0097428',
      title: 'Ghostbusters II',
      released: '1989',
      description: 'The discovery of a massive river of ectoplasm and a resurgence of spectral activity allows the staff of Ghostbusters to revive the business.',
      director: 'Ivan Reitman',
      rating: 6.4
    },
    {
      id: 'tt0107048',
      title: 'Groundhog Day',
      released: '1993',
      description: 'A weatherman finds himself living the same day over and over again.',
      director: 'Harold Ramis',
      rating: 8.1
    },
    {
      id: 'tt0116778',
      title: 'Kingpin',
      released: '1996',
      description: 'A star bowler whose career was prematurely "cut off" hopes to ride a new prodigy to success and riches.',
      director: 'Bobby Farrelly, Peter Farrelly',
      rating: 6.8
    },
    {
      id: 'tt0335266',
      title: 'Lost in Translation',
      released: '2003',
      description: 'A faded movie star and a neglected young wife form an unlikely bond after crossing paths in Tokyo.',
      director: 'Sofia Coppola',
      rating: 7.8
    },
    {
      id: 'tt0079540',
      title: 'Meatballs',
      released: '1979',
      description: 'Wacky hijinks of counselors and campers at a less-than-average summer camp.',
      director: 'Ivan Reitman',
      rating: 5.9
    },
    {
      id: 'tt0128445',
      title: 'Rushmore',
      released: '1998',
      description: 'The king of Rushmore prep school is put on academic probation.',
      director: 'Wes Anderson',
      rating: 7.7
    },
    {
      id: 'tt0096061',
      title: 'Scrooged',
      released: '1988',
      description: 'A cynically selfish TV executive gets haunted by three spirits bearing lessons on Christmas Eve.',
      director: 'Richard Donner',
      rating: 6.9
    },
    {
      id: 'tt0083131',
      title: 'Stripes',
      released: '1981',
      description: 'Two friends who are dissatisfied with their jobs decide to join the army for a bit of fun.',
      director: 'Ivan Reitman',
      rating: 6.8
    },
    {
      id: 'tt0362270',
      title: 'The Life Aquatic with Steve Zissou',
      released: '2004',
      description: 'With a plan to exact revenge on a mythical shark that killed his partner, oceanographer Steve Zissou rallies a crew that includes his estranged wife, a journalist, and a man who may or may not be his son.',
      director: 'Wes Anderson',
      rating: 7.2
    },
    {
      id: 'tt0120483',
      title: 'The Man Who Knew Too Little',
      released: '1997',
      description: 'Murray is mistaken for a spy and must stop a plot to assasinate international leaders at a banquet.',
      director: 'Jon Amiel',
      rating: 6.4
    },
    {
      id: 'tt0265666',
      title: 'The Royal Tenenbaums',
      released: '2001',
      description: 'An estranged family of former child prodigies reunites when one of their member announces he has a terminal illness.',
      director: 'Wes Anderson',
      rating: 7.5
    },
    {
      id: 'tt0103241',
      title: 'What About Bob?',
      released: '1991',
      description: 'A successful psychiatrist loses his mind after one of his most dependent patients, a highly manipulative obsessive-compulsive, tracks him down during his family vacation.',
      director: 'Frank Oz',
      rating: 6.8
    },
    {
      id: 'tt1156398',
      title: 'Zombieland',
      released: '2009',
      description: 'A shy student trying to reach his family in Ohio, and a gun-toting tough guy trying to find the Last Twinkie and a pair of sisters trying to get to an amusement park join forces to travel across a zombie-filled America.',
      director: 'Ruben Fleischer',
      rating: 7.7
    }
  ];

  return {
    all: function() {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.resolve(movies);
      }, 1000);
      return deferred.promise;
    },
    allSync : function() {
      return movies;
    },  
    get: function(movieId) {
      // Simple index lookup
      for(var i=0, l=movies.length; i < l; i++) {
        if(movies[i].id == movieId) {
          return movies[i];
        }
      }
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.