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>

或者确切地说：

<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

在ionic1应用程序中，嵌套项目中的列表分隔符存在对齐问题

1 个答案: