<!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 meeting room", "category": "forms", "url": "https://www.google.co.uk/", }, { "title": "book 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 sharepoint", "category": "useful information", "url": "https://support.office.com/en-us/article/get-started-with-sharepoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261" }, { "title": "what 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 sharepoint online , 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 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> hi, if load code file see have added css, finding difficult add links inside border have created, have managed drop down inside border reason can not add links.
i don't know if understand question, can display title ng-repeat (i edited first section) 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> 
Comments
Post a Comment