我从这个链接学习后做了一个简单的 https://github.com/JimLiu/angular-ui-tree 演示在这里 http://jimliu.github.io/angular-ui-tree/ 但为什么不显示“+”、“V”和“X”图标？
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>
我哪里错了..？你能告诉我吗？
最佳答案
我刚刚从 gearsdigital 中清理了一些东西回答。 这是更新的 plunkr我改变的是
- 更新了
angular-ui-tree的源代码(提供的plunkr使用了dropbox源代码) - 创建了一个新的
item-renderer.html。这为清理和简化代码的每个项目创建了一个列表渲染器。这有助于无限嵌套。
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>
脚本.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": []
}];
})
关于javascript - 为什么在使用嵌套列表时不加载 css ..？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25349527/