angularjs – 离子动态列表分隔符

发布时间：2020-12-17 09:41:09 所属栏目：安全来源：网络整理

导读：我现在已经对这个问题感到困惑了,所以我希望你能让我走向正确的方向. 我的角工厂返回一个看起来像这样的对象 [{ name:"Fall",year:"20xx",id: some_id_#},....] 这是一个学期的列表,每个学期的对象包含名称,年份和学期编号. 我在我的UI框架中使用ion,我想设

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

我的角工厂返回一个看起来像这样的对象

[{
    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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!