Hi its kinda long to explain my problem but i will try,
I use Angular and I have that json in a file:
{
"users": [
{
"gender": "male",
"title": "mr",
"first": "francisco",
"last": "medina",
"street": "2748 w dallas st",
"city": "flowermound",
"state": "new jersey",
"zip": "77511",
"email": "francisco.medina65#example.com",
"dob": "454252284",
"phone": "(757)-889-2571",
"cell": "(113)-542-2123",
"picture": {
"large": "http://api.randomuser.me/portraits/men/22.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/22.jpg"
}
},
{
"gender": "female",
"title": "mrs",
"first": "sherry",
"last": "elliott",
"street": "3251 brown terrace",
"city": "wichita falls",
"state": "washington",
"zip": "79455",
"email": "sherry.elliott17#example.com",
"dob": "224238139",
"phone": "(225)-793-2067",
"cell": "(968)-555-1402",
"picture": {
"large": "http://api.randomuser.me/portraits/women/37.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/women/37.jpg"
}
},
{
"gender": "male",
"title": "mr",
"first": "johnny",
"last": "medina",
"street": "1313 samaritan dr",
"city": "redding",
"state": "new hampshire",
"zip": "43269",
"email": "johnny.medina76#example.com",
"dob": "259176886",
"phone": "(991)-957-7139",
"cell": "(502)-773-1487",
"picture": {
"large": "http://api.randomuser.me/portraits/men/90.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/90.jpg"
}
}
]
}
I make http request to get the json and build a table with the results the problem is that I have to access the thumbnail picture and when i do access it it retruns me undefined, so in my opinion there is need for another http request inside that I already have but I return from the first http request three objects, so i will probably (in my opinion as I said) will need three more http requests , this is my angular code:
<!DOCTYPE html>
<html ng-app="DemoApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(even)
{
background-color:#ffffff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table th {
background-color: black;
color: white;
}
</style>
</head>
<body ng-controller="Controller as ctr">
<div class="container">
<div>
<div class="col-md-9">
<table class="table" id="orders">
<thead>
<tr>
<th>Index</th>
<th>picture</th>
<th>Name</th>
<th>Last Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users.users ">
<td>{{$index+1}}</td>
<td>{{user.thumbnail}}</td>
<td>{{user.first }}</td>
<td>{{user.last}}</td>
<td>Details
<!-- <td>
edit
<button ng-click ="ctrl.deleteCar(car.id)" class="remove">X</button>
delete
</td>-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;">
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('Controller', function($http,$scope){
var self = this;
$scope.users=[];
$scope.photoTumbnails=[];
//var users=[];
$http({
method: 'GET',
url: 'data.json'
}).then(function successCallback(response)
{
$scope.users = response.data;
console.log("The data from the file is "+$scope.users.users)
console.log("The data from the file is "+$scope.users.users.thumbnail)
}, function errorCallback(response)
{
$scope.error = response.status + ": " + response.data.statusText;
});
});
</script>
</body>
</html>
So Can I get the image to be displayed
Change
<td>{{user.thumbnail}}</td>
to
<td><img ng-src="user.picture.thumbnail"/></td>
Related
In Angular, I am trying to create a table that has collapsible detail rows. I had a sample of this working with a stack of row panels for the master details,which contained collapsible tables if are details for the master. I am attempting to modify the code to use tables for the master data, and tables for details data as well. However, I can't get it to open or collapse properly.
I have a very simple plunker file to demonstrate what I have:
http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info
I believe its a problem with the HTML, I am trying to test with ng-repeat in different places, such as at a div or tr, but I am not too familiar with angular. Could anyone point out what I am doing wrong? I am trying the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<span class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-target="#view_{{product.productid}}" data-toggle="collapse" aria-expanded="false" data-ng-if="product.items!=null"></span>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>
Your HTML structure was wrong.
You can't put a div inside a table directly..
You need to add a tr, then a td and then in it you add the div.
I have corrected your HTML structure please check .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<a class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-ng-if="product.items!=null" role="button" data-toggle="collapse" href="#view_{{product.productid}}" aria-expanded="false">
</a>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<tr class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<td colspan="3">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>
Updated plunker
this is my json data:
{
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [
{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [
{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [
{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}
]
}
]
}]}
i want to iterate through my object parameters, in the array roleModulePermissions i want to iterate parameters moduleRead,moduleWrite,moduleCreate such that i get a 3 checkbox inside a row which displays the values of this parameters how should i write html script to access the data like i specified.and i want the data to come in bootstrap row panel
You can created nested table and achieve this.
Here is the working snippet
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script>
(function() {
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.roles = {
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}]
}]
}]
};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<table class="table">
<tr>
<th>Module</th>
<th>Sub Module</th>
</tr>>
<tr ng-repeat="module in roles.module">
<td col-span="2">{{module.pageName}}</td>
<td ng-repeat="submodule in module.subModules">
<table class="table">
<tr>
<td>{{submodule.pageName}}</td>
<td ng-repeat="permission in submodule.roleModulePermissions">
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleRead">Read</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleWrite">Write</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleCreate">Create</label>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
I have props: ['attributes']
{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}
In Template:
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<input type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}
</div>
</div>
Result:
enter image description here
Question: How do I return selected radio buttons in an array? For example:
[{
"name": "Color",
"variant":
{
"name": "Blue"
}
},
{
"name": "Size",
"variant":
{
"name": "XL"
}
}]
The radio button does not add to the array as a checkbox.
You can do something like this.
You need to splice existing item each time so new value added.
Main part was searching item and removing and you can do it by looping through current items and find index of existing item and remove it so new value can be updated.
check below code.
var attributes = [{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}];
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
attributes: attributes,
selectedData:[]
},
methods:{
setValue( name, value) {
//console.log(name,value);
var self = this;
this.selectedData.forEach(function(val, index){
if(val['name'] == name) {
self.selectedData.splice(index, 1);
return false;
}
});
this.selectedData.push({
"name": name,
"variant":
{
"name": value
}
});
}
}
})
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<div class="half">
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<label>
<input #click="setValue(attribute.name, variant.name)" type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}</label>
</div>
</div>
</div>
<div class="half">
<pre>{{ selectedData }}</pre></div>
</div>
</body>
</html>
Hi need help on how to loop this array value into 3 column using angularjs.
Currently my view is like this
Html table contain 3 column the value showing in vertical instead of horizontal
Below is my JSON view
{
"Table1": {
"titleList": [
"Table1",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}
],
},
"Table2": {
"titleList": [
"Table2",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Siti",
"startDate": "",
"completionDate": ""
},
{
"Name": "wan",
"startDate": "",
"completionDate": ""
},
{
"Name": "nita",
"startDate": "",
"completionDate": ""
},
],
},
"Table3": {
"titleList": [
"HGA",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
},
{
"Name": "Nora",
"startDate": "",
"completionDate": ""
},
],
}
}
My angularjs showing as below
<tbody ng-repeat ="(nodeSummaryKey, nodeSummaryVal) in nodeSummary">
<tr ng-if="isObject(nodeSummaryVal)" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat = "(dataKey, dataValue) in nodeSummaryVal" >
<td ng-if="dataKey == 'titleList'" class="stx-attributes-group"
ng-repeat="(eachDataKey, eachDataValue) in nodeSummaryVal.titleList">{{eachDataValue}}</td>
<td ng-if="dataKey == 'dataList'" ng-repeat="(eachDataKey, eachDataValue) in dataValue">
<div ng-repeat="(eachKey, eachValue) in eachDataValue">{{eachValue}}</div>
</tr>
</tbody>
You could achieve it by simple ng-repeat:
angular.module('app', []).controller('Controller', function($scope) {
$scope.table_data = {
"Table1": {
"titleList": ["Table1", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}],
},
"Table2": {
"titleList": ["Table2", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Siti",
"startDate": "",
"completionDate": ""
}, {
"Name": "wan",
"startDate": "",
"completionDate": ""
}, {
"Name": "nita",
"startDate": "",
"completionDate": ""
}, ],
},
"Table3": {
"titleList": ["HGA", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
}, {
"Name": "Nora",
"startDate": "",
"completionDate": ""
}, ],
}
};
});
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<div ng-repeat="(dta_key,dta_value) in table_data">
<h1>{{dta_key}}</h1>
<table >
<thead>
<tr>
<th ng-repeat="thead in dta_value.titleList">{{thead}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tbody in dta_value.dataList">
<td ng-repeat="trow in tbody">{{trow}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<!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>
Hi, if you load my code into a file you will see that i have added some CSS, however i am finding it difficult to add the links inside the border that i have created, i have managed to get the drop down inside the border but for some reason i can not add the links.
I don't know if I understand your question, but you can display title with another ng-repeat (I edited your 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">
{{key}}
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>