I was going through the low quality posts queue when I had to review the audit answer below. I first thought it was an audit with a high quality post pretending to be flagged, but it ended up being the opposite and gave me the good old warning:
STOP! Look and Listen.
This was an audit, designed to see if you were paying attention. You didn't pass. This post has severe quality issues. It is abusive nonsense, noise, spam, blatantly off-topic or otherwise irredeemable
Can anyone tell me why this question was deleted? I do not know if it is the correct answer to the question but it seems to be correctly formatted, without any quality issues.
The answer:
You can solve this problem using the IntegralUI TabStrip directive. There is an article: Dynamically Populate Tabs from JSON in AngularJS, where tabs are loaded from a JSON file. You can use the code from the article and by little modification you can make it work in your case.
Basically, you need to set up how tab content is displayed. For example from your data structure, you can use this:
$scope.tabs = [ { countryId : 1, name: 'France', country: 'France', content: [ { name: 'Paris' }, { name: 'Marseille' } ] }, { countryId : 2, name: 'England', country: 'England', content: [ { name: 'London' }, { name: 'Southampton' } ] } ];
The HTML looks like:
<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs"> <iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.country}}"> <ul class="country-list"> <li ng-repeat="city in tab.content"> <span>{{city.name}}</span> </li> </ul> </iui-tab> </iui-tabstrip>
And show the cities in one line:
.country-list li { display: inline-block; margin: 10px 0; }
Review link (can people other than me access it?): https://stackoverflow.com/review/low-quality-posts/21954747