ionic1アプリでネストされた項目のリスト分割子との位置合わせの問題がある

Question

各状態コードの下に都市リストを作成しようとしています。 私はこのような状態の配列があります。今

states = [{ state:"AK", 
      Cities:[{cityName:"Anchorage", 
        cityCode:"ANC"}, 
        {cityName:"Barrow", 
        cityCode: "BRW"}] 
     }, 

     { 
      state:"AL", 
      Cities:[{cityName:"Anniston", 
       cityCode:"ANB"}, 
       {cityName:"Birhimgham", 
       cityCode: "BHM"}] 
    }] 

を、私は状態がリストヘッダいる状態で都市のリストを表示したいです。

<ion-content> 
     <ion-list> 
     <ion-item class="item-divider" ng-repeat="state in states"> {{state.state}} 
     <ion-list> 
      <ion-item ng-repeat="city in state.Cities"> 
      {{city.CityName}} 
      </ion-item> 
     </ion-list> 
     </ion-item> 
    </ion-list> 
    </ion-content> 

上記のコードは、のような出力が得られます。 しかし、私は出力がそれを実現するためにどのよう

に見えるようにしたい

のように、それが現在に見えますか？

Answer 1

・ホープこれはあなたの問題を解決：

<ion-content> 
    <ion-list ng-repeat="state in states"> 
     <ion-list-header>{{state.state}}</ion-list-header> 
     <ion-item ng-repeat="city in state.Cities">{{city.CityName}}</ion-item> 
    </ion-list> 
</ion-content> 

またはこの1の正確：

<ion-content> 
    <ion-item-group ng-repeat="state in states"> 
    <ion-item-divider color="light">{{state.state}}</ion-item-divider> 
    <ion-item ng-repeat="city in state.Cities">{{city.CityName}}</ion-item> 
    </ion-item-group> 
</ion-content> 

https://ionicframework.com/docs/components/#list-dividers