To display the first few items in the rss feed in crash state

Question

All rss feeds are loaded in my cordon ion code 1, so my page is too long due to too many rss feeds.

So I just want to map the first three rss elements to a preset (which is in a crash state) . When you click "Advanced", it will expand and display all the elements. Click again, it will crash and show only the first rss.

Currently, no rss elements are displayed in crash state. It shows everything in an extensible state.

What I need:

• Display of the first three rss elements, sorting by date (the last from the top) in a crash state

• Show all rss elements when they are extensible.

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;
};

condition to collapse. The initial state. (Look at the “+” sign in blue). None of rss were shown. I want the first 3 RSS feeds to be displayed.

Expand the condition. It will show all rss feeds.

Example: rss feed link is as follows:

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;

If you are confused with what happens to the collapse and expansion, this is an example.

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

Answer 1

Here is a demo: http://jsfiddle.net/afagx45b/1/

| limit to x ng-repeat, ng-if div, , show-more show-less. .

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

: , , orderBy.

Answer 2

Angular limitTo:limit, x x:

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

Answer 3

You can use limitToas suggested by @marco gomes. You can first set the variable to 3, which will tell you ng-repeatto display only 3 rss elements by default. But when you go to view more, we will set the variable to the length of the array to show all rss elements.

HTML

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

  <a class="item item-icon-right" ng-if='showmore' ng-repeat="item in rssNews| limitTo:count | 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>

Js

 $scope.count=3;
  $scope.showmore = false;
    $scope.togglemore = function(){
      $scope.showmore = !$scope.showmore;
      if($scope.showmore)
          $scope.count=$scope.rssNews.length;
      else
         $scope.count=3;
    };

Working example : http://jsfiddle.net/6b0y3tar/190/