离子动态列表分频器 [英] Ionic Dynamic List Divider

问题描述

我一直难倒对这个问题有一段时间了，所以我希望你可以帮我在正确的方向。

I have been stumped on this problem for a while now, so I am hoping you can get me in the right direction.

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

My angular factory returns an object which looks like this

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

这是学期为包含名称，年份和学期ID每学期的对象名单。
我使用的离子为我的UI框架，我想设置我的HTML输出到这个样子......

This is a list of semesters with an object for each semester containing the name, year, and semester id. I am using ionic for my UI framework, and I would like to set up my HTML output to look like this...

2012结果
  ＆NBSP;＆NBSP;秋天结果
  ＆NBSP;＆NBSP;春节结果
2013结果
  ＆NBSP;＆NBSP;冬季结果
  ＆NBSP;＆NBSP;春节结果
2014年结果
  ＆NBSP;＆NBSP;等结果
  ＆NBSP;＆NBSP;等等。

2012
  Fall
  Spring
2013
  Winter
  Spring
2014
  etc
  etc

在哪里，每年是一个列表分频器。我的HTML目前看起来像这样

Where each year is a list divider. My HTML currently looks like this

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

我不喜欢我的混乱与逻辑的观点，因为在控制器所属，但我不知道如何去做，啊哈。

I don't like cluttering my view with logic, because that belongs in the controller, but I am not sure how to go about it, aha.

谢谢你们！

推荐答案

我不知道这是否是做的最好的方式，但我建了一个codePEN，做这样的：

I'm not sure if this is the best way of doing it, but I built a CodePen that does this:

• 以原始列表（这将是你的真实数据）


• 通过建立唯一的起始字母附加项修改列表


• 在视图中，我们可以看到，如果我们的数据是一个字母，如果是的话，把它当作一个列表分隔

这是一种像自己怎么一枝钢笔，工作（的http：// codepen.io/ionic/pen/uJkCz ）。这感觉稍有不妥给我，但它似乎运作良好。这里是控制器部分：

This is kind of like how one of their pens work (http://codepen.io/ionic/pen/uJkCz). It feels slightly wrong to me, but it seems to work well. Here is the controller portion:

.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);

  }
})

和随后视图检查是否该数据是一个人VS的信。同样，这种感觉有点跛，但...

And then the view checks to see if the data is a person vs a letter. Again, this feels a bit lame, but...

<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：//$c$cpen.io/cfjedimaster/笔/ HqrBf

You can run this here: http://codepen.io/cfjedimaster/pen/HqrBf

这篇关于离子动态列表分频器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！