使用Angular js ng repeat指令过滤json对象

Filter json objects with Angular js ng-repeat directive

本文关键字:过滤 json 对象 指令 repeat Angular js ng 使用      更新时间:2023-09-26

在我的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'}
                ],
          }
    ];
});

在我看来,我想在按大洲排列的选项卡元素中显示国家,即我有选项卡来保存每个大洲的国家。例如,我有一个非洲选项卡,在这个选项卡中,我想显示非洲对象中的国家。我曾尝试使用"过滤器"在每个选项卡中只显示特定大陆的国家,但它不起作用,也没有任何显示。在检查元素时,代码似乎被注释了。这是我尝试使用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>

让我知道这是否有帮助

尝试将第一个中继器更改为该ng-repeat="continent in countryCtrl.continents而不是ng-repeat="continent in countryCtrl.continents.name,过滤器将始终工作