2
我有一個文件夾結構，我想用角度放入html選擇。角度選擇/下拉式分層數據
我在下面創建了一個示例，顯示結構並將其輸出到嵌套列表結構中。我也把它放入選擇，但只顯示頂級文件夾。有沒有辦法選擇顯示所有的縮進文件夾，以便您可以直觀地看到選擇中的結構？
我另一個屬性可能添加到文件夾與文件夾的深度，以幫助壓痕。這些文件夾是用戶在系統中定義的，所以我不知道有多少級別沒有查看數據。
感謝
var app = angular.module("selectFolderApp", []);
app.controller("selectFolderController", ['$http', '$scope',
function($http, $scope) {
var ctrl = this;
ctrl.folders = [{
"name": "Housing",
"id": "1",
"children": [{
"name": "Datasheets",
"id": "2",
"children": [{
"name": "Folder 1",
"id": "3",
"children": []
}, {
"name": "Folder 2",
"id": "4",
"children": []
}]
}, {
"name": "Charts",
"id": "5",
"children": [{
"name": "Folder A",
"id": "6",
"children": []
}, {
"name": "Folder B",
"id": "7",
"children": []
}, {
"name": "Folder C",
"id": "8",
"children": [{
"name": "Sub Folder 1",
"id": "9",
"children": []
}, {
"name": "Sub Folder 2",
"id": "10",
"children": []
}
]
}, {
"name": "Folder D",
"id": "11",
"children": []
}, {
"name": "Folder E",
"id": "12",
"children": []
}]
}]
}, {
"name": "Road Works",
"id": "13",
"children": [{
"name": "Datasheets",
"id": "14",
"children": [{
"name": "Folder 1",
"id": "15",
"children": [{
"name": "Sub Folder 1",
"id": "16",
"children": []
}]
}, {
"name": "Folder 2",
"id": "17",
"children": []
}, {
"name": "Folder 3",
"id": "18",
"children": []
}, {
"name": "Folder 4",
"id": "19",
"children": []
}]
}, {
"name": "Charts",
"id": "20",
"children": [{
"name": "Folder A",
"id": "21",
"children": []
}, {
"name": "Folder B",
"id": "22",
"children": []
}, {
"name": "Folder C",
"id": "23",
"children": []
}]
}]
}];
}
]);<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="selectFolderApp">
<div ng-controller="selectFolderController as ctrl">
<br>{{ ctrl.folderId }}
<br>
<br>
<select class="form-control" ng-model="ctrl.folderId" ng-options="item.id as item.name for item in ctrl.folders">
<option></option>
</select>
<br>
<script type="text/ng-template" id="folderTree">
{{item.name}}
<ul>
<li ng-repeat="item in item.children" ng-include="'folderTree'"></li>
</ul>
</script>
<ul>
<li ng-repeat="item in ctrl.folders" ng-include="'folderTree'"></li>
</ul>
</div>
</body>
</html>
這個問題可以幫助你 - http://stackoverflow.com/questions/5288792/how-to-indent-multiple-levels-of-select-optgroup-with-css – iulian