Skip to content

Instantly share code, notes, and snippets.

@four2theizz0

four2theizz0/index.html

Created June 21, 2014 06:38
Show Gist options
  • Save four2theizz0/5e2b115924cbb1f1e76c to your computer and use it in GitHub Desktop.
Save four2theizz0/5e2b115924cbb1f1e76c to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by four2theizz0.
Raw
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>
Raw
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;
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment