Skip to content
Ionic directive for displaying nested list items.
Branch: master
Clone or download
Latest commit b7be0c5 Jul 24, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests Added LoadComplete event Mar 13, 2016
.gitignore wrong ignore rule for node_modules Jan 12, 2017
LICENSE Update Mar 28, 2018
gulpfile.js added minified css and minified js to build process, fixes #45 Jan 5, 2017

ion-tree-list Stories in Ready devDependency Status Bower version

Ionic directive for displaying nested list ionic items.

Check demo link.


I am actively looking for contributors who can port this library to Ionic 2. If you are interested in doing so, don't hesitate to drop me an email.


bower install ion-tree-list --save

Add somewhere in your HEAD tag:

<script src="lib/ion-tree-list/ion-tree-list.js"></script>

Or fetch it from the cdnjs project :

You'll need to add ion-tree-list as a dependency on your Ionic app:

angular.module('starter', [

In your controller.js:

  $scope.tasks = [
      name: 'first task 1',
      tree: [
          name: 'first task 1.1'
      name: 'first task 2'

In your view.html:

<ion-tree-list items="tasks" collapsed="true"></ion-tree-list>

Fetch clicked item by listening to $ionTreeList:ItemClicked in your controller:

Emmited events

$scope.$on('$ionTreeList:ItemClicked', function(event, item) {
  // process 'item'

$scope.$on('$ionTreeList:LoadComplete', function(event, items) {
  // process 'items'

Custom templates

Imagine your tasks in $scope.tasks in your controller.js has an extra attribute as checked:

  $scope.tasks = [
      name: 'first task 1',
      checked: false,
      tree: [
          name: 'first task 1.1',
          checked: true
      name: 'first task 2',
      checked: true

In order to consume the checked value in your view, create a ion-item.tmpl.html file in your www folder containing the following:

<input type="checkbox" ng-model="item.checked"/>

Add an extra template-url attribute for your custom template:

<ion-tree-list items="tasks" template-url="'ion-item.tmpl.html'"></ion-tree-list>


Developers interested in contributing are very welcomed :)

Don't hesitate to ping me on my email if you are missing a feature, a fix or you simply want to contribute.

There's a list of issues right here.

You can’t perform that action at this time.