In computer user interface design, a master–detail interface displays a master list and the details for the currently selected item. The original motivation for master-detail was old 1980s 80-character-wide display size, which also makes it a great pattern for modern smartphones and tablets.
 
In practice, master-detail screen pattern can be shown in vertical or horizontal form. Mobile development accepts only horizontal form, what used to be vertical form is now known as Slide menu pattern. Master-detail pattern (layout) is a good choice when the user needs to see more information in the master list than just a few identifiers, or when the master view is comprised of a set of items that each has additional details.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Example

 
Demo
 
Working embede example
 
Ionic Master Detail Pattern
 
HTML
 
<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="index.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>
 
<body>
  <ion-nav-view></ion-nav-view>
    
  <script id="list.html" type="text/ng-template">
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Search The Movie Database</h1>
    </ion-header-bar>
    <ion-content>
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="movie.name" ng-change="searchMovieDB()">
      </label>
      <ion-list>
        <div class="list">

          <a ng-repeat="movie in movies" href="#/movie/{{movie.id}}" class="item item-thumbnail-left">
            <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" onerror="this.src = 'https://www.ginesisnatural.com/images/no_image.jpg';">
            <h2>{{movie.original_title}}</h2>
            <h4>{{movie.release_date}}</h4>
          </a>

        </div>
      </ion-list>
    </ion-content>
  </script>
  
  <script id="view.html" type="text/ng-template">
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Movie details</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list card">

        <div class="item item-avatar">
          <img src="http://files.softicons.com/download/object-icons/movies-icons-by-pinchodesigns/png/32x32/Movie.png">
          <h2>{{movie.original_title}}</h2>
          <p>{{movie.release_date}}</p>
        </div>

        <div class="item item-image">
          <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" width="200px" />
        </div>

        <a class="item" href="#">
            Average Vote: <strong>{{movie.vote_average}}</strong> (Votes: {{movie.vote_count}})
          </a>

      </div>
    </ion-content>
  </script>   
  
</body>
 
</html>
 
JavaScript
 
var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'ListCtrl'
    })
    .state('view', {
      url: '/movie/:movieid',
      templateUrl: 'view.html',
      controller: 'ViewCtrl'
    });
 
  $urlRouterProvider.otherwise("/");
 
});

nameApp.factory('Movies', function($http) {
  var cachedData;
 
  function getData(moviename, callback) {
 
    var url = 'http://api.themoviedb.org/3/',
      mode = 'search/movie?query=',
      name = '&query=' + encodeURI(moviename),
      key = '&api_key=470fd2ec8853e25d2f8d86f685d2270e';
 
    $http.get(url + mode + key + name).success(function(data) {
 
      cachedData = data.results;
      callback(data.results);
    });
  }
 
  return {
    list: getData,
    find: function(name, callback) {
      console.log(name);
      var movie = cachedData.filter(function(entry) {
        return entry.id == name;
      })[0];
      callback(movie);
    }
  };
 
});
 
nameApp.controller('ListCtrl', function($scope, $http, Movies) {
 
  $scope.movie = {
    name: ''
  }
 
  $scope.searchMovieDB = function() {
 
    Movies.list($scope.movie.name, function(movies) {
      $scope.movies = movies;
    });
     
  };
});
 
nameApp.controller('ViewCtrl', function($scope, $http, $stateParams, Movies) {
  Movies.find($stateParams.movieid, function(movie) {
    $scope.movie = movie;
  });
});
 

Code overview

 
Like AngularJS, Ionic framework is all about MVC (or to be more precise Model–View–Whatever) so let’s discuss basic application details.
 
First thing we need to do is to initialize our application:
 
<html ng-app="starter">
 
This translates to JavaScript:
 
var demoApp = angular.module('starter', ['ionic']);
 
You can have multiple ng-app attributes on your page, they don’t need to be set to root HTML element, you can have multiple independent applications running in the same page. For Ionic to work properly, we need to set the [‘ionic’] dependency, a framework will not work without it.
 
Continue Reading

  • Karthik

    The topic should have been simpler. The main intention is to explain master detail pattern and adding a database discussion to it only makes it complicated. Making the data local will give a complete picture.

    Say, we are working on local data and I have a list of 20 movies added to $scope.movies object with a variable called id, when I want to filter it on id, I get both id’s 1, 11, 12, 13…19. How can I filter the exact match?

    • Tho point of this article is to show a real working example. It doesn’t matter where the source is. 95 % of the code is going to be the same. Plus why should I spend my time building a localstorage example when I can use already existing data source.

  • Cool beans – this is great fully working example of “master/detail” using Ionic! The concise explanations are very helpful – I’m sure there’s a lot of detail left for one to discover/learn (in Ionic/Angular) but for the purposes of the example, it keeps things compact and not go off on multiple concepts (but it’s understood that there are). Kudos and thank you.