相关疑难解决方法(0)

离子动态列表分割器

我已经被这个问题困扰了一段时间了,所以我希望你能让我朝着正确的方向前进.

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

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

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

多谢你们!

angularjs cordova ionic-framework

9
推荐指数
2
解决办法
1万
查看次数

Angular:使用分隔符/分隔符获取ng-repeat列表

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/

我有一些问题.

  1. 一般来说,使用嵌套的ng-repeat是解决这个问题的好方法,还是Angular专门为此目的而内置?一些消息人士还说,在ng-repeat中使用函数是一个坏主意.但它确实有效,所以我很困惑为什么我不应该使用它.
  2. 在查看控制台时,GetSpeakers会在此示例中被调用两次,我无法找出原因?
  3. 我应该如何将对象返回到GetSpeakers函数中的作用域,同时防止$ scope的重载?

angularjs angularjs-ng-repeat

3
推荐指数
2
解决办法
1万
查看次数

离子收集 - 重复日期分隔

我得到了一个包含文本和图像的大约200个项目的非常大的列表.ng-repeat是缓慢渲染这种顺利的方法.它尝试了这个解决方案.工作得很好.但不是收集重复.

我的网络服务返回:

在此输入图像描述

有特定日期的活动.事件应按日期分组.所以为了使用集合重复,如果你不能使用angular.filter groupBy,如何插入分隔符?

angularjs ionic-framework ionic

3
推荐指数
1
解决办法
1638
查看次数

Ionic v3:按日期/日列出的组列表

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

javascript ionic-framework ionic3 angular

2
推荐指数
1
解决办法
4125
查看次数