按日期从服务器分组json数据

时间:2014-09-21 23:43:21

标签: angularjs ionic-framework

我正在以下面的格式从我的服务器检索数据

[{id: 1, title:"hello world", date:"2014-10-11",location: "The Room"},{id: 1, title:"hello world2", date:"2014-10-11",location: "The Room"}, {id: 1, title:"hello world3", date:"2014-10-11",location: "The Room"}]

我尝试在我的视图中显示数据

  • 2014年10月11日
  • 你好世界
  • hello world2
  • hello world3

我尝试在@Plantface的答案中使用此处的示例How can I group data with an Angular filter?,但数据显示在我的视图中

  • 2014年10月11日
  • 你好世界
  • hello world2
  • hello world3

  • 二○一四年十月十一日

  • 你好世界
  • hello world2
  • hello world3

  • 二○一四年十月十一日

  • 你好世界
  • hello world2
  • hello world3

当应该渲染一次时,日期似乎重复。我错过了什么吗?

1 个答案:

答案 0 :(得分:0)

视图

<script type="text/ng-template" id="schedule.html">
            <ion-view title="Schedule">
                <ion-content>
                    <ion-list ng-repeat="date in datesToFilter() | filter:filterDates">
                        <div class="item item-divider">{{ date.date }}</div>
                        <ion-item href="#/tab/schedule/{{event.id}}" class="event item-icon-right" ng-repeat="event in events | filter:{date: date.date}">
                            <span class="time">{{ event.startstamp }}</span>
                            <span class="title">{{ event.title }}</span>
                            <i class="icon ion-chevron-right"></i>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-view>
            </script>

控制器

function($rootScope, $scope, $q, API, $data, $window) {

            $scope.events = $data.events;

            var indexedDates = [];

            $scope.datesToFilter = function() {
                indexedDates = [];
                return $scope.events;
            }

            $scope.filterDates = function(event) {
                var isNew = indexedDates.indexOf(event.date) == -1;
                if (isNew) {
                    indexedDates.push(event.date);
                }
                return isNew;
            }