角度选择/下拉层次数据
Angular Select / Dropdown Hierarchical Data
我有一个文件夹结构,我想使用angular将其放入html select中。
我在下面创建了一个示例,显示了该结构并将其输出到嵌套列表结构中。我也把它放进了select,但这只显示了文件夹的顶层。有没有办法让select显示所有带有缩进的文件夹,这样你就可以直观地看到select中的结构?
我可以根据文件夹的深度向文件夹添加另一个属性,以帮助进行缩进。文件夹是用户在系统中定义的,所以如果不查看数据,我不知道它会有多少级别。
感谢
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>
将文件夹结构转换为对象的平面列表,每个对象都有一个级别属性。然后,您可以使用此属性在视觉上缩进select元素中的值。
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": []
}]
}]
}];
var times = function (n, str) {
var result = '';
for (var i = 0; i < n; i++) {
result += str;
}
return result;
};
var recur = function (item, level, arr) {
arr.push({
name: item.name,
id: item.id,
level: level,
indent: times(level, '–')
});
if (item.children) {
item.children.forEach(function (item) {
recur(item, level + 1, arr);
});
}
};
ctrl.flatFolders = [];
ctrl.folders.forEach(function (item) {
recur(item, 0, ctrl.flatFolders);
});
}
]);
<!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">
<select class="form-control" ng-model="ctrl.folderId">
<option ng-repeat="item in ctrl.flatFolders" ng-value="{{ item.id }}">
{{ item.indent }} {{ item.name }}
</option>
</select>
</div>
</body>
</html>
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 从json对象聚集数据并创建层次结构
- json格式的国家数据到层次数据
- D3:使用 nest 函数将带有父键的平面数据转换为层次结构
- 如何在node.js应用程序中的mongodb中按层次结构顺序插入数据
- 角度选择/下拉层次数据
- 根据行数据创建层次结构
- 多级网格层次结构-祖父母数据
- 用于报告层次结构数据的下拉列表
- KendoTreeView在第二层次结构中需要什么数据格式?
- 使用HTML和CSS可视化数据层次结构
- 如何在层次网格中为嵌套的剑道UI数据源过滤数据
- 如何将这种原始json数据转换/分组为层次结构