使用Angular js ng-repeat指令過濾json對象

Question

在我的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，請問如何實現？

Answer 1

嘗試將您的第一個轉發器更改為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

Answer 2

試試這個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>

讓我知道這是否有幫助