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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

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

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

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