我已经被这个问题困扰了一段时间了,所以我希望你能让我朝着正确的方向前进.
我的角度工厂返回一个看起来像这样的对象
[{
name:"Fall",
year:"20xx",
id: some_id_#
}, ....]
Run Code Online (Sandbox Code Playgroud)
这是一个学期列表,每个学期都有一个包含姓名,年份和学期ID的对象.我正在使用ionic作为我的UI框架,我想将我的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>
Run Code Online (Sandbox Code Playgroud)
,我不喜欢用逻辑混淆我的观点,因为它属于控制器,但我不知道如何去做,啊哈.
多谢你们!
Angular仍然很新,只是找到我的方式.
我正在使用ng-repeat输出一个字母表的名称列表.我想在此列表中添加作为标签的分隔符.
例:
--------
A
--------
Author 1
Author 2
--------
B
--------
Author 3
Author 4
etc
Run Code Online (Sandbox Code Playgroud)
我的想法是使用嵌套的ng-repeats循环遍历字母表,通过第二个ng-repeat获取具有该特定字母的作者的对象.这是我到目前为止所拥有的:
<div data-ng-repeat="letter in alphabet">
<div class="item item-divider">
{{letter}}
</div>
<ul>
<li data-ng-repeat="speaker in GetSpeakers(letter)" type="item-text-wrap" href="#/speaker/{{speaker.ID}}">
{{speaker.title}}
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
控制器代码:
.controller('SpeakersCtrl', function($scope, $routeParams, StorageHandler) {
$scope.GetSpeakers = function(letter) {
// Get list of authors for that letter
console.log('test '+letter);
};
$scope.alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
})
Run Code Online (Sandbox Code Playgroud)
小提琴:http://jsfiddle.net/t6Xq8/
我有一些问题.
我得到了一个包含文本和图像的大约200个项目的非常大的列表.ng-repeat是缓慢渲染这种顺利的方法.它尝试了这个解决方案.工作得很好.但不是收集重复.
我的网络服务返回:
有特定日期的活动.事件应按日期分组.所以为了使用集合重复,如果你不能使用angular.filter groupBy,如何插入分隔符?
在Ionic的旧版本1中,我能够构建按日期分组的事件列表,如下所示:
<ion-list ng-repeat="(key, value) in events| groupBy: 'event.date'">
<div class="item item-divider" ng-if="value">
{{ ::key | event.date }}
</div>
<ion-item class="item" ng-repeat="event in value track by event.event.event_id">
{{ ::event.event.title }}
</ionic-item>
</ion-list>
Run Code Online (Sandbox Code Playgroud)
虽然事件对象看起来像这样(事件#1和#3共享相同的日期):
{
"events": [
{
"id": 1,
"date": "2017-12-26",
"title": "First event"
},
{
"id": 2,
"date": "2017-12-30",
"title": "Second event"
},
{
"id": 3,
"date": "2017-12-26",
"title": "Third event"
},
{
"id": 4,
"date": "2017-12-31",
"title": "Last event"
}
]
}
Run Code Online (Sandbox Code Playgroud)
这给了我一个存储在"事件"对象中的事件列表,这些事件按"event.date"分组.所以在同一天的所有事件都按项目分隔符分组:
+--------------+
+ 2017-12-26 +
+--------------+
| …Run Code Online (Sandbox Code Playgroud)