{"id":47840311,"url":"https://github.com/rbw/angular-bootstrap-nav-tree2","last_synced_at":"2026-04-03T20:37:57.692Z","repository":{"id":72518732,"uuid":"74560283","full_name":"rbw/angular-bootstrap-nav-tree2","owner":"rbw","description":null,"archived":false,"fork":false,"pushed_at":"2016-11-23T09:18:35.000Z","size":250,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T18:37:16.211Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-11-23T09:17:26.000Z","updated_at":"2016-11-23T09:18:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"f616f019-0788-46ae-91b7-163e5e2e77e1","html_url":"https://github.com/rbw/angular-bootstrap-nav-tree2","commit_stats":{"total_commits":49,"total_committers":10,"mean_commits":4.9,"dds":0.5510204081632653,"last_synced_commit":"f5dccdcc30f26b7c07a269269c8a6231958fd2f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rbw/angular-bootstrap-nav-tree2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbw%2Fangular-bootstrap-nav-tree2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbw%2Fangular-bootstrap-nav-tree2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbw%2Fangular-bootstrap-nav-tree2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbw%2Fangular-bootstrap-nav-tree2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbw","download_url":"https://codeload.github.com/rbw/angular-bootstrap-nav-tree2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbw%2Fangular-bootstrap-nav-tree2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31375772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T17:53:18.093Z","status":"ssl_error","status_checked_at":"2026-04-03T17:53:17.617Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-03T20:37:54.825Z","updated_at":"2026-04-03T20:37:57.578Z","avatar_url":"https://github.com/rbw.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-bootstrap-nav-tree\n==========================\n\nThis is a Tree directive for Angular JS apps that use Bootstrap CSS.\n\nexample: http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html\n\nThe style is completely Bootstrap because the tree is actually just a Bootstrap \"nav\" list, with a few changes:  Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.\n\nThe abn-tree now works Bootsrap 2, or Bootstrap 3, and with Angular 1.1.5 or 1.2.0\n\nThe normal Glyphicons work well, but they appear black instead of blue.  Alternatively, you can use the Font Awesome icons, which look even better, and match the blue color of the text.\n\nYou can change the icons used by specifying them in html attributes.\n\nThis tree is developed using CoffeeScript and Jade, but you don't need to be using either of those to use this tree -- you just have to be using Angular and Bootsrap.\n\n\nHow to use it:\nJust include the 2 files from \"dist\",\n\n    abn_tree_directive.js\n    abn_tree.css\n\nAdd `'angularBootstrapNavTree'` to your module's list of dependencies.\n\nThen put an `\u003cabn-tree\u003e` directive in your HTML.\n( see the example in \"test\" )\n\nAt a miniumum, you must supply `tree-data` :\n\n    \u003cabn-tree tree-data=\"example_treedata\"\u003e\u003c/abn-tree\u003e\n\nBut there are other attributes to customize the tree:\n\n    \u003cabn-tree \n        tree-data         = \"my_treedata\"\n        tree-control      = \"my_tree\"\n        icon-leaf         = \"icon-file\"\n        icon-expand       = \"icon-plus-sign\"\n        icon-collapse     = \"icon-minus-sign\"\n        on-select         = \"my_tree_handler(branch)\"\n        expand-level      = \"2\"\n        initial-selection = \"Vegetable\"\u003e      \n    \u003e\u003c/abn-tree\u003e\n\nThe example uses Font-Awesome 3, but Font-Awsome 4 also works.\nUse the following syntax:\n\n    icon-leaf = \"fa fa-file\"\n    \n( in general, use spaces to apply multiple classes to icon elements )\n\n\nThe data to create the tree is defined in your controller, and could be as simple as this:\n\n    $scope.my_data = [{\n      label: 'Languages',\n      children: ['Jade','Less','Coffeescript']\n    }]\n\nThere is a long-form for elements, in which each node is an object with a \"label\", and optionally other stuff like \"data\", and \"children\".\nThere is a short-form for listing nodes children (as used for \"children\" above), where the \"children\" is just a list of strings.\nIf you use the short-form for listing elements, then your \"on-select\" function will have to act based only upon the \"branch.label\".  If you use the \nlong-form, where is branch is an object, then you can also attach \"data\" to a branch.\n\nIf you would like to add classes to a certain node, give it an array of classes like so:\n\n    $scope.my_data = [{\n      label: 'Languages',\n      children: ['Jade','Less','Coffeescript']\n      classes: [\"special\", \"red\"]\n    }]\n\nEach element without children, or leaf, is automatically given a leaf class. If you would like to force certain nodes not to be leaves (won't get leaf class and will show expand/collapse icons), set noLeaf to true in a long-form listing like so:\n\n    {\n      label: 'Coffeescript',\n      noLeaf: true\n    }\n\nYou can supply a single default \"on-select\" function for the whole tree -- it will be called whenever a branch is selected:\n\n    $scope.my_tree_hander = function(branch){...}\n\n\nOr, you can put a custom \"on-select\" function on an individual branch:\n\n    $scope.my_data = [{\n      label: 'Languages',\n      onSelect: function(branch){...},\n      children: ['Jade','Less','Coffeescript']\n    }]\n    \nEach branch can have a \"data\" element which you can use to hold whatever data you want.  It is not touched by the tree, and it is available to your \"on-select\" function as \"branch.data\".  In the example, in the \"test\" folder, this technique is used in \"my_tree_handler\" to add extra info to \"Dog\",\"Cat\", and \"Hippo\".  \n\nWarning: If you attach extra attributes directly to a branch (instead of to \"branch.data\"), they could conflict with the internal workings of the tree, which adds branch attributes at runtime, like \"expanded\" and \"selected\".\n\nTree-Control API:\nIf you pass an empty object to the tree as \"tree-control\", it will be populated with a set of functions for navigating and controlling the tree.  See the example page for a demo...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbw%2Fangular-bootstrap-nav-tree2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbw%2Fangular-bootstrap-nav-tree2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbw%2Fangular-bootstrap-nav-tree2/lists"}