To display first few items in rss feed at collapse state

Question

My cordova ionic 1 code currently load all the rss feeds and this cause my page is too long due to too many rss feeds.

Thus, I just want to display the first three rss item at preset(which is in collapse state). When click on 'More',it will expand and display all items. Click again, it will collapse and show only the first rss.

Currently, no rss items shows in collapse state. It shows all in expandable state.

What I required:

1. Display first three rss items, sort with date(latest on top) in collapse state.

2. Display all rss items when it is expandable state.

my template

<div class="card">
  <div class="item item-divider">RSS</div>

  <a class="item item-icon-right" ng-if='showmore' ng-repeat="item in rssNews| orderBy: 'pubDate':true" ng-click="openitems(item.link)">
    <h2>{{item.title}}</h2>
    <h6>{{item.pubDate}}</h6>
    <p {{story.description | htmlToPlaintext}}</p>
  </div>
  </a>
  <div ng-click="togglemore()" <i class="icon" ng-class="showmore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><span class="padding" ng-bind="showmore ? 'Less' : 'More'"></span></div>
</div>

angularjs

$scope.showmore = false;
$scope.togglemore = function() {
  $scope.showmore = !$scope.showmore;
};

collapse condition .Initial state.(Look at the '+' sign in blue color). None of the rss was shown. I want first 3 rss feeds to display.

Expand condition. It will show all the rss feeds.

Example, the rss feeds link is as below

https://www.google.com/finance/company_news?q=KLSE:AEON&ei=pKh8WfndJ9G8uQTKgKq4CQ&output=rss

another JS

    $webServicesFactory.get(
      "https://www.google.com/finance/company_news",
      {},
      {
        output: "rss",
        q: 'KLSE' + ":" + 'AEON'
      }
    ).then(
      function success(xmlData) {
        var x2js = new X2JS();
        $globalFactory.personalStockNews = x2js.xml_str2json(xmlData).rss.channel.item;
        console.info($globalFactory.personalStockNews);
        $state.go("app.page");
      },
      function error(error) {
        $globalFactory.personalStockNews = null;
        $ionicLoading.hide();
        $state.go("app.page");
      }
    );
  },
  function error(error) {
    $ionicLoading.hide();
  }
);
$scope.rssNews = $globalFactory.personalStockNews;

In case you are confused with what is collapse and expand, this is the example.

http://jsfiddle.net/shengoo/6b0y3tar/

Answer 1

Here's a demo: http://jsfiddle.net/afagx45b/1/

I used the | limit to x filter of ng-repeat along with a simple ng-if statement on the div to know if show-more or show-less have been clicked. You should be able to adapt the rest to your needs.

When show-less is visible: <div ng-if="showmore" ng-repeat="group in groups | orderBy: 'date'"> and show-more is visible: <div ng-if="!showmore" ng-repeat="group in groups | orderBy: 'date' | limitTo:3">

Edit: Updated to show how to order by a date, check out this thread for more info on the orderBy filter.

Answer 2

Angular comes with a limitTo:limit filter, it support limiting first x items and last x items:

 <a class="item item-icon-right" ng-if='showmore' ng-repeat="item in rssNews| limitTo:1 | orderBy: 'pubDate':true" ng-click="openitems(item.link)">

you can find more info in the documentation