[英]Filter json objects with Angular js ng-repeat directive
In my angular js controller, I have a json array that contains continents and inside the continents contain an array of countries 在我的angular js控制器中,我有一个包含大洲的json数组,在大洲内部包含一个国家/地区数组
//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 my view i want to display the countries in tabbed elements arranged by continents ie I have tabs to hold the countries in each continent. 在我看来,我想以按大洲排列的选项卡式元素显示国家/地区,即我有一些选项卡可容纳每个大洲的国家/地区。 eg i have a tab for Africa and inside this tab i want to display the countries in the Africa object. 例如,我有一个非洲选项卡,在此选项卡中,我想显示非洲对象中的国家。 I have tried using the 'filter' to display only countries in a particular continent in each tab but it is not working neither does anything show up. 我尝试使用“过滤器”在每个选项卡中仅显示特定大陆的国家/地区,但是它没有任何作用。 On inspecting the element the code seems to be commented. 在检查元素时,似乎对代码进行了注释。 This is the first task I am trying to accomplish using Angular-js so I am still learning the ropes. 这是我尝试使用Angular-js完成的第一个任务,因此我仍在学习绳索。
This is what my view looks like 这就是我的看法
<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>
So the idea is to have the countries repeated in the div with class col-md-3
How can i achieve this please? 因此,我们的想法是让国家/地区在类col-md-3
重复使用div,请问如何实现?
尝试将您的第一个转发器更改为ng-repeat="continent in countryCtrl.continents
的ng-repeat="continent in countryCtrl.continents.name
而不是ng-repeat="continent in countryCtrl.continents
的ng-repeat="continent in countryCtrl.continents.name
Try this html Code 试试这个HTML代码
<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 | 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>
let me know if this is helpful 让我知道这是否有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.