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

README.md

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

Ionic directive for displaying nested list ionic items.

Check demo link.

Note:

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.

Installation

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 : https://cdnjs.com/libraries/ion-tree-list.

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 :)

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.