tvdstaaij / ion-tree-list

Ionic directive for displaying nested list items.

ion-tree-list

Ionic directive for displaying nested list ionic items.

Check demo link.

Installation

bower install ion-tree-list --save

Add somewhere in your HEAD tag:

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

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

angular.module('starter', [
    'ionic', 
    'controllers', 
    'services', 
    'ion-tree-list'
])

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'
  console.log(item);
});

$scope.$on('$ionTreeList:LoadComplete', function(event, items) {
  // process 'items'
  console.log(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"/>
{{item.name}}

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

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

Contributing

Developers interested in contributing are very welcomed.

There's an existent list of issues right here.