four2theizz0/fpCyl.markdown

## fpCyl.markdown

      
    Raw
  

              fpCyl.markdown
            
          
    fpCyl

A Pen by Captain Anonymous on CodePen.
License.

  
## index.html
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Nav view in sidebar example</title>

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

  <body ng-controller="MainCtrl">
    <ion-side-menus>
    <!-- Center content -->
    <ion-pane ion-side-menu-content>
        <header class="bar bar-header bar-dark">
            <button class="button button-icon" ng-click="toggleCategories()">
                <i class="icon ion-navicon"></i>
            </button>
            <h1 class="title">Nested categories</h1>
        </header>

        <ion-nav-view name="menuContent"></ion-nav-view>

    </ion-pane>
    <!-- Left menu -->
    <ion-side-menu side="left">
        <header class="bar bar-header bar-dark">
            <button ng-click="showTopLevelCategories()" ng-class="{ hide: hideSidemenuBackButton }" class="button back-button button-icon icon ion-arrow-left-c button back-button button-icon icon ion-arrow-left-c"  type="backType" label="backLabel" icon="backIcon" style=""><!-- ngIf: icon && label --> </button>
            <h1 class="title">Categories</h1>
        </header>
        <ion-content has-header="true">
            <ul class="list">
                <div ng-repeat="category in categories">
                    <!-- displayed only 2 levels of nested categories, other levels are in the subcategories filter triggered by "Refine" button -->
                    <a ng-if="category.taxons.length > 0 && category.is_first_level" ng-click="showSubcategories(category)" class="item" >{{category.name}}</a>
                    <a ng-if="category.taxons.length == 0 || !category.is_first_level" href="#/category/{{category.id}}" class="item" >{{category.name}}</a>
                </div>
            </ul>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

  </body>
</html>

## script.js
angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {

    $scope.hideSidemenuBackButton = true;
    var topLevelCategories;

    topLevelCategories = $scope.categories = [
      {id: 1, name: 'First: 1st level', taxons: [
        {id: 4, name: '1. Child of First: 2st level', taxons: [], is_first_level: false},
        {id: 5, name: '2. Child of First: 2st level', taxons: [], is_first_level: false},
        {id: 6, name: '3. Child of First: 2st level', taxons: [], is_first_level: false}
      ], is_first_level: true},
      {id: 2, name: 'Second: 1st level', taxons: [
        {id: 7, name: '1. Child of Second: 2st level', taxons: [], is_first_level: false},
        {id: 8, name: '2. Child of Second: 2st level', taxons: [], is_first_level: false}
      ], is_first_level: true},
      {id: 3, name: 'Third: 1st level', taxons: [
        {id: 9, name: '2. Child of Third: 2st level', taxons: [], is_first_level: false}
      ], is_first_level: true}
    ];

    var getByParentId = function(id) {
      for (var i in topLevelCategories) {
        if (topLevelCategories[i].id == id) {
          return topLevelCategories[i].taxons;
        }
      }
    }

    $scope.toggleCategories = function() {
        $scope.sideMenuController.toggleLeft();
    };

    $scope.showSubcategories = function(category) {
        $scope.categories = getByParentId(category.id);
        $scope.hideSidemenuBackButton = false;
    };

    $scope.showTopLevelCategories = function () {
        $scope.categories = topLevelCategories;
        $scope.hideSidemenuBackButton = true;
    };
}]);
	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Nav view in sidebar example</title>

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

	<body ng-controller="MainCtrl">
	<ion-side-menus>
	<!-- Center content -->
	<ion-pane ion-side-menu-content>
	<header class="bar bar-header bar-dark">
	<button class="button button-icon" ng-click="toggleCategories()">
	<i class="icon ion-navicon"></i>
	</button>
	<h1 class="title">Nested categories</h1>
	</header>

	<ion-nav-view name="menuContent"></ion-nav-view>

	</ion-pane>
	<!-- Left menu -->
	<ion-side-menu side="left">
	<header class="bar bar-header bar-dark">
	<button ng-click="showTopLevelCategories()" ng-class="{ hide: hideSidemenuBackButton }" class="button back-button button-icon icon ion-arrow-left-c button back-button button-icon icon ion-arrow-left-c" type="backType" label="backLabel" icon="backIcon" style=""><!-- ngIf: icon && label --> </button>
	<h1 class="title">Categories</h1>
	</header>
	<ion-content has-header="true">
	<ul class="list">
	<div ng-repeat="category in categories">
	<!-- displayed only 2 levels of nested categories, other levels are in the subcategories filter triggered by "Refine" button -->
	<a ng-if="category.taxons.length > 0 && category.is_first_level" ng-click="showSubcategories(category)" class="item" >{{category.name}}</a>
	<a ng-if="category.taxons.length == 0 \|\| !category.is_first_level" href="#/category/{{category.id}}" class="item" >{{category.name}}</a>
	</div>
	</ul>
	</ion-content>
	</ion-side-menu>
	</ion-side-menus>

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

	.controller('MainCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {

	$scope.hideSidemenuBackButton = true;
	var topLevelCategories;

	topLevelCategories = $scope.categories = [
	{id: 1, name: 'First: 1st level', taxons: [
	{id: 4, name: '1. Child of First: 2st level', taxons: [], is_first_level: false},
	{id: 5, name: '2. Child of First: 2st level', taxons: [], is_first_level: false},
	{id: 6, name: '3. Child of First: 2st level', taxons: [], is_first_level: false}
	], is_first_level: true},
	{id: 2, name: 'Second: 1st level', taxons: [
	{id: 7, name: '1. Child of Second: 2st level', taxons: [], is_first_level: false},
	{id: 8, name: '2. Child of Second: 2st level', taxons: [], is_first_level: false}
	], is_first_level: true},
	{id: 3, name: 'Third: 1st level', taxons: [
	{id: 9, name: '2. Child of Third: 2st level', taxons: [], is_first_level: false}
	], is_first_level: true}
	];

	var getByParentId = function(id) {
	for (var i in topLevelCategories) {
	if (topLevelCategories[i].id == id) {
	return topLevelCategories[i].taxons;
	}
	}
	}

	$scope.toggleCategories = function() {
	$scope.sideMenuController.toggleLeft();
	};

	$scope.showSubcategories = function(category) {
	$scope.categories = getByParentId(category.id);
	$scope.hideSidemenuBackButton = false;
	};

	$scope.showTopLevelCategories = function () {
	$scope.categories = topLevelCategories;
	$scope.hideSidemenuBackButton = true;
	};
	}]);