I'm working on an angular js controller with a json array that organizes countries by continents. Each continent consists of its own array of countries.
//CONTROLLER
app.controller('CountryController', function(){
this.continents =
[
{
name:'Africa',
countries:
[
{ name: 'Algeria', code:'DZ', operators:'3'},
{ name: 'Angola', code:'AO', operators:'1'},
{ name: 'Benin', code:'BJ', operators:'2'},
{ name: 'Burkina Faso', code:'BF', operators:'1'}
],
},
{
name:'AsiaPacific',
countries:
[
{ name: 'Afghanistan', code:'AF', operators:'4'},
{ name: 'Bahrain', code:'BH', operators:'2'}
],
}
];
});
In the view, I want to display these countries in tabs categorized by continent. For example, there should be a tab for Africa displaying all countries within the Africa array. However, my attempts at using the 'filter' method to show countries from specific continents have not been successful. Upon inspecting the element, it appears that the code is commented out. This project marks my first experience using Angular-js, so I'm still navigating through the learning curve.
This is the current structure of my view:
<div ng-app="countriessupported" class="container container_with_height">
<div ng-controller="CountryController as countryCtrl" id="myTabContent" class="tab-content hidden-xs">
<div class="tab-pane fade active in" id="africa">
<div class="col-md-12 countries_col-12" ng-repeat="continent in countryCtrl.continents.name | filter: 'Africa' ">
<a href="">
<div class="col-md-3 country_container" ng-repeat="country in continent.countries">
<div class="country_name">
{{ country.name }}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal is to have the countries displayed within the div with class col-md-3. What steps can I take to achieve this successfully?