分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 离子动态列表分隔符，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我现在已经对这个问题感到困惑了,所以我希望你能让我走向正确的方向.

[{
    name:"fall",year:"20xx",id: some_id_#
},....]

这是一个学期的列表,每个学期的对象包含名称,年份和学期编号.
我在我的UI框架中使用ion,我想设置我的HTML输出看起来像这样…

2012
秋季
弹簧
2013
冬季
弹簧
2014
等等
等等

每年是一个列表分隔符.我的HTML目前看起来像这样

<ion-list show-delete="data.showdelete">
    <!-- I WAN TO CHANGE THIS TO BE A DYNAMIC HEADER ADDED FOR EACH NEAR YEAR-->
    <ion-item class="item-divider">
        Semesters
    </ion-item>

    <ion-item ng-show="semesters.length == 0">
        No semesters yet!
    </ion-item>
    <ion-item class="item-dark item-icon-right" href="#/app/class-list/{{semester.iD}}/{{semester.namE}}/{{semester.year}}" ng-repeat="semester in semesters">
        <ion-delete-button class="ion-ios7-trash-outline"
                   ng-click="deleteSemester(semester)">
        </ion-delete-button>
        {{semester.namE}} {{semester.year}}
        <i class="icon ion-ios7-arrow-forWARD"></i>
    </ion-item>
</ion-list>

我不喜欢用逻辑混乱我的观点,因为它属于控制器,但我不知道如何去做,aha.

多谢你们！

我不知道这是否是最好的方式,但是我建立了一个可以执行此操作的CodePen：

拿一份原始清单(这将是你的真实数据)
>通过为唯一的起始字母创建其他项目来修改列表
>在视图中,我们看到我们的数据是否是一封信,如果是,则将其视为列表分隔符

这有点像他们的一支笔(http://codepen.io/ionic/pen/uJkCz).对我来说感觉有些错误,但似乎运作良好.这是控制器部分：

.controller('RootCtrl',function($scopE) {

  //orig data
  var list = [];
  list.push({name:"Gary"});
  list.push({name:"Gosh"});
  list.push({name:"Ray"});
  list.push({name:"Sam"});
  list.push({name:"SAndy"});

  $scope.list = [];
  var lastChar = '';
  for(var i=0,len=list.length; i<len; i++) {
    var item = list[i];

    if(item.name.charAt(0) != lastChar) {
      $scope.list.push({name:item.name.charAt(0),letter:truE});
      lastChar = item.name.charAt(0);
    }
    $scope.list.push(item);

  }
})

然后视图检查数据是否是一个人对一个信件.再次,这感觉有点跛脚,但…

<ion-list type="list-inset">
  <ion-item ng-repeat="person in list" ng-class="person.letter? 'item-divider':''">
    {{person.namE}}
  </ion-item>
</ion-list>

你可以在这里运行：http://codepen.io/cfjedimaster/pen/HqrBf