Ionic Creator

Making a Searchable Video Library

Want to make the Search Component actually search through some data and populate a list? In this Weekly Workshop we'll make a searchable video library complete with video detail page!

 

Here's the final code from this video:

// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, Tutorials) {
  
  $scope.narrowed_tutorials = Tutorials.list;
  $scope.data = {
      search: ''
  }
  
  $scope.search = function(){
      
      var s = $scope.data.search.toLowerCase();
      
      if (s == ''){
          $scope.narrowed_tutorials = Tutorials.list;
          return;
      }
      
      $scope.narrowed_tutorials = Tutorials.list.filter(function(tutorial){
        if (tutorial.name.toLowerCase().indexOf(s) > -1 || tutorial.description.toLowerCase().indexOf(s) > -1){
            return true;
        } 
        return false;
      });
  }

}
// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, Tutorials) {

    $scope.video = Tutorials.keys[$stateParams.videokey];

}
/* !!! IMPORTANT: Rename "mymodule" below and add your module to Angular Modules above. */

angular.module('tutorials', [])

.service('Tutorials', [function(){
    
    var tutorials_list = [
        {
          key: 'deepdive',
          name: 'Creator Deep Dive',
          description: 'An indepth overview of the new Creator',
          id: 'lTLTs2ZA2JQ'
        },
        {
          key: 'codingtutorial',
          name: 'Custom Code Support',
          description: 'Learn how to use our Code feature',
          id: 'IrwrZBBOiP8'
        },
        {
          key: 'sell',
          name: 'Sell your Client a Mobile App',
          description: 'Use Creator to Close Deals',
          id: 'XPOXiwUFj7E',
          blog: 'http://blog.ionic.io/sell-your-client-a-mobile-app/'
        },
        {
          key: 'googlemaps',
          name: 'Google Maps Component',
          description: 'How to use our new Maps Component',
          id: 'jH6pehfUNp4'
        },
        {
          key: 'clizip',
          name: 'Export: CLI & ZIP',
          description: 'Using the CLI & ZIP Export features',
          id: 'CBsBKRriZFI'
        },
        {
          key: 'forms',
          name: 'Forms',
          description: 'How to use Forms and Form Components',
          id: 'uVwVYiwPQrE'
        },
        {
          key: 'defaultpage',
          name: 'Set Default Page',
          description: "How to set the starting page for your app",
          id: "3jXJVdpbt28"
        },
        {
          key: 'appcamp',
          name: 'AppCamp',
          description: 'Getting started learning Ionic Framework',
          id: 'yXNNKSmEdpM'
        },
        {
          key: 'theming1',
          name: 'Theming & SCSS',
          description: 'How to customize fonts & colors with SCSS',
          id: 'IYJyA90KqWc'
        },
        {
          key: 'beautifulsidemenus',
          name: 'Beautiful Side Menus',
          description: 'Use SCSS to style your Side Menu',
          id: 'Wb0weT3vD6I'
        },
        {
          key: 'formdata',
          name: 'Working with Form Data',
          description: 'Use directives & controllers with Forms',
          id: 'JWtUxuhC4Ng'
        },
        {
          key: 'ionicauth1',
          name: 'Ionic Auth Part 1',
          description: 'Login & Signup Design',
          id: 'T7RKbd5fLag'
        },
        {
          key: 'ionicauth2',
          name: 'Ionic Auth Part 2',
          description: 'Integrating with Ionic Auth & Gravatar',
          id: 'McBS4fbPt5Q'
        },
        {
          key: 'chatapp',
          name: 'Making a Chat App',
          description: 'Use Firebase to make a simple chat app',
          id: 'QbQf8cNePMM'
        },
        {
          key: 'htmlpages',
          name: 'Working with HTML Pages',
          description: 'Complex Grid Layout Example',
          id: 'upSIaQKU8s0'
        },
        {
          key: 'apis1',
          name: 'Using APIs with Angular $http',
          description: 'Part 1: Storing Survey Results with Sheetsu',
          id: 'DJotOLNrM8M'
        },
        {
          key: 'apis2',
          name: 'Using APIs with Angular $http',
          description: 'Part 2: Retrieving, Deleting & Querying',
          id: 'ZvF2_ZpqZpk'
        },
        {
          key: 'buttonsinheaders',
          name: 'Buttons in Headers',
          description: 'Learn about Header Buttons & Click Handlers',
          id: 'VuWO2VtLvRo'
        },
        {
          key: 'listitembuttons',
          name: 'List Item Buttons',
          description: 'Delete, Reorder, and Swipe Buttons',
          id: '1qPkyvB8NpQ'
        },
        {
          key: 'togglingcontent',
          name: 'Toggling Content',
          description: 'Use a Button Bar or Toggle to show content',
          id: '6lgQTrbb2cc'
        }
      ];
      
      var tutorials_keys = {};

      for (var i=0;i<tutorials_list.length;i++){
        tutorials_keys[tutorials_list[i].key] = tutorials_list[i];
      }

    return {
        list: tutorials_list,
        keys: tutorials_keys
    }

}]);

Making a Searchable Video Library