我现在已经对这个问题感到困惑了,所以我希望你能让我走向正确的方向.
我的角工厂返回一个看起来像这样的对象
[{
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：
原文链接：https://www.f2er.com/angularjs/140440.html拿一份原始清单(这将是你的真实数据)
>通过为唯一的起始字母创建其他项目来修改列表
>在视图中,我们看到我们的数据是否是一封信,如果是,则将其视为列表分隔符
这有点像他们的一支笔(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>
