I am tring to create a TreeView with drag and drop functionality. I use this plugin
http://ngmodules.org/modules/angular-ui-tree, a demo is available here:
http://jimliu.github.io/angular-ui-tree/
But when I do the same thing things as written in the documentation my TreeViewdoes not load - why?
Here is my code.
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="ctr">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.item = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
}
</script>
</html>
Plunker :
http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview
There is a syntax error, the last closing ) is missing in the bottom script block.
The controller name is mismatch, the MainCtrl is registered but the ctrl is used in ng-controller.
In the first ng-repeat="item in list", it loop over $scope.list but the data is in $scope.item.
Plunker: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview
Related
I'm not able to use gantt.section. You can see the picture below that the width of the section is zero, it seems that I miss some files. I imported in my html file :
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt.css" />
<link rel="stylesheet" type="text/css" href=node_modules/angular-gantt/dist/angular-gantt-plugins.css"/> <link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt-core.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/src/plugins/sections/sections.css" />
All the plugins that I use work fine except sections.
data:
[
{
"name": "Create concept",
"tasks": [
{
"name": "Create concept",
"priority": 20,
"content": "<i class=\"fa fa-cog\" ng-click=\"scope.handleTaskIconClick(task.model)\"></i> {{task.model.name}}",
"color": "#F1C232",
"from": moment(1568800800000),
"to": moment(1568808000000),
"progress": 100,
"sections": {
"items": [
{
"name": "Section #1",
"classes": [
"section-1"
],
"from": moment(1568800800000),
"to": moment(1568811600000)
},
{
"name": "Section #2",
"classes": [
"section-2"
],
"from": moment(1568811600000),
"to": moment(1568808000000)
}
]
},
"id": "10c452b2-618b-f694-b0b6-b33ebfaac4fb"
}
],
"id": "1477337d-0c9a-0174-2d08-b45befb0fe32"
}
]
the html part :
<div class="row">
<div class="col-sm-12"
gantt data="data"
filter-row="{'name': ganttOptions.filterRow}"
>
<gantt-tree></gantt-tree>
<gantt-sections disable-magnet="true"></gantt-sections>// When I leave the default disable-magnet, I find in console an error says that Cannot read property 'getMagnetDate' of undefined
<gantt-dependencies enabled="true" read-only="true" js-plumb-defaults="jsPlumbDefaults" fallback-endpoints="fallbackEndpoints"></gantt-dependencies>
</div>
i want to make dynamic code
strong text
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].Name;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList(0)">cat1</a>
</li>
<li class="list-group-item" ng-click="updateList(1)"><a ng-click="updateList(1)">cat2</a>
</li>
<li class="list-group-item" ng-click="updateList(2)"><a ng-click="updateList(2)">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in adults">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
guys, i am facing some issue in angular js. I want to display categories list on the left side and display product name on right side panel when you click on cat1 display all include categories product name.as an example when you click cat1 that time display name as "pro1" and "pro3" for reference check image
is it possible in angular.ja 1.6.x? enter image description here
var shop = {
categories: [
'cat1','cat2','cat3'
],
products: [
{
name: 'pro1',
categories: ['cat1']
},
{
name: 'pro2',
categories: ['cat2']
},
{
name: 'pro3',
categories: ['cat1','cat3']
}
]
};
Check the code below :
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(cat) {
$scope.childrens = $scope.adults.filter(function(adult){
return adult.categories.includes(cat);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList('cat1')">cat1</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat2')">cat2</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat3')">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in childrens">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
I am using kendo UI grid with angular and I want to bind grid using json file (model.json) stored in the root directory as the index.html (I am using visual studio 2013 and web empty project template). My javascript controller is stored in Scripts/app/ directory.
This is my json file:
{
"model": [
{
"RowNumber": "1",
"AccountNo": "10236",
"PostingDate": "20.01.2015",
"AmountDebit": "1800.0",
"AmountCredit": "1500.0",
"Balance": "300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "2",
"AccountNo": "10648",
"PostingDate": "26.01.2015",
"AmountDebit": "3000.0",
"AmountCredit": "1700.0",
"Balance": "1300.0",
"Description": "skafiskafnjak"
},
{
"RowNumber": "3",
"AccountNo": "10700",
"PostingDate": "22.01.2015",
"AmountDebit": "2900.0",
"AmountCredit": "1800.0",
"Balance": "1100.0",
"Description": "knjizenje"
},
{
"RowNumber": "4",
"AccountNo": "10810",
"PostingDate": "24.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1400.0",
"Balance": "2400.0",
"Description": "hlabuka"
},
{
"RowNumber": "5",
"AccountNo": "10101",
"PostingDate": "29.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1500.0",
"Balance": "2300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "6",
"AccountNo": "10364",
"PostingDate": "25.01.2015",
"AmountDebit": "4300.0",
"AmountCredit": "1800.0",
"Balance": "2500.0",
"Description": "TestNova"
}
]
}
This is my controller:
(function () {
'use strict';
angular.module("app", ["kendo.directives"]).controller("generalledgerController", function ($scope, $http) {
$scope.gridMaster = {
dataSource: {
dataType: "json",
transport: {
read: "model.json"
},
schema: {
data: "model"
}
},
selectable: true,
sortable: true,
pageable: {
refresh: true,
pageSize: true,
buttonCount: 5
},
columns: [
{ field: "RowNumber", title: "R. Br.", width: "50px", template: '<div style="text-align:center;">#= kendo.toString(RowNumber) #</div>' },
{ field: "AccountNo", title: " Br. Knjiženja", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Datum", width: "70px" },
{ field: "Description", title: "Opis", width: "170px" },
{ field: "AmountCredit", title: "Duguje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountCredit, "n2") #</div>' },
{ field: "AmountDebit", title: "Potražuje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountDebit, "n2") #</div>' },
{ field: "Balance", title: "Saldo", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(Balance, "n2") #</div>' }
],
toolbar: ["create"]
};
});
})();
This is my html page:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="content/metisMenu.css">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap-theme.css.map">
<link rel="stylesheet" type="text/css" media="all" href="content/Site.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.common.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.mobile.all.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.default.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.metro.min.css">
<link href="content/generalledger.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.js"></script>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
<script src="scripts/kendo/2015.3.1111/kendo.web.min.js"></script>
<script type="text/javascript" src="scripts/app/generalledgercontroller.js"></script>
<title>App</title>
</head>
<body ng-app="app" ng-controller="generalledgerController">
<div id="wrapper" class="active">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="col-lg-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3 class="navbar-brand" style="font-family: 'Lato', calibri;width: 100%;margin: 0;left: 3%;color: grey;font-size: 24px;font-weight: 400">Logo</h3>
</div>
</div>
<div class="collapse navbar-collapse" style="padding-right: 20px">
<ul class=" nav navbar-nav" style="padding-left:20px"></ul>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu"></ul>
</div>
</div>
</nav>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div>
<div class="divH3Style">
<h3 class="h3LabelForm">General Ledger</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div kendo-grid k-options="gridMaster" >
</div>
</div>
<div id="tabstrip-2">
<!-- fields for input/update data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid doesn't load any data, all I see are the headers.
I watched all the relevant links to this problem:
Simple Json connection not working, Binding a kendo ui grid to a json file without generating the grid in code, http://www.telerik.com/forums/simple-json-databinding...
Any help would be appreciated.
I have included code of index.html, app.js and json. I have created views needed with me. But I want to load the json and display it on all the views of my application. I am able to call the json on one page but not on the other views. Please provide me some pointers.
HTML Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<div>
<h1 style="text-align:right">Visa Cares</h1>
<h3 style="text-align: left">Total Body Transformation</h3>
</div>
<div ng-controller="myController" >
<ul class="nav nav-tabs">
<li>Home</li>
<li>Back</li>
</ul>
<button ng-click="clickButton()">List</button>
<table border="0" cellpadding="3">
<tr ng-repeat="x in modules">
<td>{{x.filters}}</td>
<td>{{ x.title}}</td>
<td>{{x.feature}}</td>
<td>{{x.order}}</td>
</tr>
</table>
<pre>
<div ng-repeat="y in modules">
{{y.buildings.building1.floors.floor1.rooms.room1 | prettyJSON}}
</div>
</pre>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view>
Hello AJ
</div>
<div>Angular seed app: v<span app-version></span></div>
<div>
<footer>
<ul class = "nav nav-tabs">
<li>Campus Buildings</li>
<li>Conference Rooms</li>
<li>Hotteling Areas</li>
<li>Huddle Rooms</li>
<li>Shuttle Schedule</li>
</ul>
</footer>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</div>
</body>
</html>
Controller Code:
'use strict';
// Declare app level module which depends on views, and components
var wfApp = angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
wfApp.controller('myController', ['$scope', '$http', function($scope, $http) {
$scope.clickButton = function() {
$http.get('document.json').success(function(data) {
$scope.modules = data.modules;
$scope.modules = data.modules.buildings.building1;
});
}
}]);
I have a document.json which contains following data:
{"modules": [
{
"title": "Conference Rooms",
"feature": "list",
"filters": "Conference",
"Order": 1,
"icon": "conference.png"
},
{
"title": "Hoteling Rooms",
"feature": "list",
"filters": "Hotel",
"order": 2,
"icon": "hoteling.png"
},
{
"title": "Huddle Rooms",
"feature": "list",
"filters": "Huddle",
"order": 3,
"icon": "huddle.png"
},
{
"title": "Shuttle Schedule",
"feature": "shuttle_list",
"order": 4,
"csvInput": {
"d1Pickup": [
"8:00",
"8:30",
"9:00"
],
"d4Pickup": [
"7:50",
"8:20",
"8:50"
]
},
"icon": "shuttle.png"
},
{
"feature": "map",
"order": 0,
"icon": "campus.png",
"buildings": {
"building1": {
"order": 0,
"id": "D1",
"label": "D1 - 8910 Ridgeline Blvd",
"floors": {
"floor1": {
"name": "1<sup>st</sup> Floor",
"order": 0,
"image": "floor1_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F1-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F1-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F1-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor2": {
"name": "2<sup>nd</sup> Floor",
"order": 1,
"image": "floor2_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F2-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F2-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F2-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor3": {
"name": "3<sup>rd</sup> Floor",
"order": 2,
"image": "floor3_map.png",
"rooms": {
"room 1": {
"name": "Room 1",
"number": "D1-F3-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F3-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F3-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
}
}
}
}
}
],
"settings": {
"building": "D1",
"floor": 4,
"timeout": "120 (in seconds)",
"cssOverride": "custom.css",
"kiosk_coords": "200,200"
}
}
You should try returning your "views" as partials via the controller. This way they can all use the same scope. Otherwise, you need to call the app/controller in each view in order to get access to the same json data within the scope.
Sounds like the perfect use of a Service
// Adding injection of jsonService to controller
wfApp.controller('myController', ['$scope', '$http', 'jsonService', function($scope, $http, jsonService) {
// You can use jsonService.getJson() to get the file from anywhere the service is injected.
jsonService.getJson().success(function(data) {
$scope.modules = data.modules;
});
// Now your JSON is loaded (after promise resolves) and it can be used anywhere in the controller scope.
}]);
// Service to get the JSON file for use anywhere in the application
wfApp.service("jsonService", ["$http", function($http) {
return {
getJson: function() {
return $http.get('document.json');
}
}
}]);
The service can also be called in your $routeProvider using a resolve to load the JSON before the view is processed. This may be the ideal solution if you require the data immediately on page load for controller methods or data binding.
I make a simple after studying from this link
https://github.com/JimLiu/angular-ui-tree
and demo is here
http://jimliu.github.io/angular-ui-tree/
But it not show "+" ,"V" and "X" icon why ?
http://plnkr.co/edit/xur9RjMrhxEppNIewfo6?p=preview
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
</script>
</html>
where I am wrong ..? can you please tell me?
I just cleaned things up a bit from gearsdigital answer.
Here is the updated plunkr Things that i changed were
Updated the source of the angular-ui-tree (the plunkr provided used a dropbox source)
Created a new item-renderer.html. This creates a list renderer for every item which cleans up and simplifies the code. This helps in unlimited nesting.
item_renderer.html
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span
class="glyphicon"
ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
<ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
<li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
</li>
</ol>
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="angular-ui-tree#*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
<script data-require="angular-ui-tree#*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<!-- Nested node template -->
<div class="row">
<div class="col-sm-6">
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="list">
<li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.moveLastToTheBeginning = function () {
var a = $scope.list.pop();
$scope.list.splice(0, 0, a);
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
console.log(nodeData);
nodeData.items.push({
id: nodeData.id * 10 + nodeData.items.length,
title: nodeData.title + '.' + (nodeData.length + 1),
items: []
});
};
$scope.list = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
})
You simply included wrong ui-tree-handle Templates.
Working Version: http://plnkr.co/edit/wiOWgql8jMN2NUKYmCGl?p=preview
Use this:
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>
Instead of this:
<div ui-tree-handle>
{{item.title}}
</div>
Same for your sub items.