<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<style type="text/css">
body {background-color: #D3D3D3;}
table {
width: 30%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.groove {border-style: groove;
height: 400px;
width: 400px;
}
</style>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.categoryL = '';
$scope.categoryList = function(value) {
$scope.categoryL = value;
}
$scope.selectedCategory = {};
$scope.menus = [{
"Forms": [{
"title": "Book a Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/",
},
{
"title": "Book a Pool Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Order Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Gift & Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
}]
}, {
"News": [{
"title": "Discovery Communications embraces Office 365",
"category": "News",
"url": "https://blogs.office.com/2016/07/18/discovery-communications-embraces-office-365-to-foster-creative-culture-of-innovation/"
},
{
"title": "Guardian Industries",
"category": "News",
"url": "https://blogs.office.com/2016/07/15/guardian-industries-connect-collaborate-and-innovate-from-anywhere/"
},
{
"title": "Data Loss Prevention Policy Tips in OneDrive",
"category": "News",
"url": "https://blogs.office.com/2016/07/14/data-loss-prevention-policy-tips-in-onedrive-mobile-apps/"
}]
},
{
"Useful Information": [{
"title": "Get started with SharePoint",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Get-started-with-SharePoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261"
},
{
"title": "What is SharePoint?",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/What-is-SharePoint-97b915e6-651b-43b2-827d-fb25777f446f"
},
{
"title": "Accessibility features in SharePoint Online",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Accessibility-features-in-SharePoint-Online-f291404a-dc7e-44de-a31f-d81b3099c2b9?ui=en-US&rs=en-US&ad=US"
},
{
"title": "Videos for SharePoint Online and SharePoint 2013",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Videos-for-SharePoint-Online-and-SharePoint-2013-ed074945-4ddc-4479-9efe-6b3945cf8266?ui=en-US&rs=en-US&ad=US"
}]
}]
$scope.labels = [];
(function getMenuLabels() {
angular.forEach($scope.menus, function(menu) {
$scope.labels.push({
label: Object.keys(menu)[0],
moreInformation: menu[Object.keys(menu)[0]]
});
})
$scope.selectedCategory = $scope.labels[0];
})();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="center">
<center>
<p class="groove">
<select width="300" style="width:400px" ng-model="selectedCategory" ng-options="label.label for label in labels"></select>
<section class="categoryL">
<b ng-repeat="info in selectedCategory.moreInformation">
<br>
<table align="center" class="ex2" style="border:1px solid yellowgreen;">
<tr>
<td BGCOLOR="#ff00ff"><a ng-href="{{info.url}}">{{info.title}}</a></td>
</tr/>
</table>
</section>
</center>
</div>
</p>
</body>
</html>
嗨，如果您将我的代码加载到文件中，将会看到我添加了一些CSS，但是我发现很难在创建的边框内添加链接，我设法在边框内添加了下拉菜单，但是由于某种原因，我无法添加链接。
最佳答案
我不知道我是否理解您的问题，但是您可以使用另一个ng-repeat显示标题（我编辑了第一部分）https://plnkr.co/edit/8ItCgNT4xPbpLnKbYawf?p=preview：
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<div ng-repeat="(key,val) in menu">
<a href="" ng-click="categoryList(key)">{{key}}</a>
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>