在我的 Angular js Controller 中,我有一个包含大陆的 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'}
],
}
];
});
在我看来,我想在按大陆排列的选项卡式元素中显示国家/地区,即我有选项卡来保存每个大陆的国家/地区。例如,我有一个非洲选项卡,在该选项卡内我想显示非洲对象中的国家/地区。 我尝试使用“过滤器”在每个选项卡中仅显示特定大陆的国家/地区,但它不起作用,也没有显示任何内容。在检查元素时,代码似乎被注释了。这是我尝试使用 Angular-js 完成的第一个任务,所以我仍在学习诀窍。
这就是我的观点
<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>
所以我们的想法是让国家/地区在 col-md-3 类的 div 中重复
请问我怎样才能实现这个目标?
最佳答案
试试这个 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>
请告诉我这是否有帮助
关于javascript - 使用 Angular js ng-repeat 指令过滤 json 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36744399/