在崩溃状态下显示rss Feed中的前几个项目

Question

我的cordova离子1代码目前加载所有rss feed,这导致我的页面太长,因为rss源太多.

因此,我只想在预设中显示前三个rss项目(处于崩溃状态).当在"更多"点击,它就会展开并显示所有项目.再次单击,它将折叠并仅显示第一个rs.

目前,没有rss项目显示崩溃状态.它显示所有处于可扩展状态.

我需要的是:

1. 显示前三个rss项目,按崩溃状态排序日期(最新).

2. 在可扩展状态下显示所有rss项目.

我的模板

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

崩溃条件.初始状态.(看蓝色的'+'号).没有显示任何RSS.我想要显示前3个RSS源.

展开条件.它将显示所有rss提要.

例如,rss feed链接如下

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

另一个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;

如果您对崩溃和展开的内容感到困惑,这就是示例.

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

Answer 1

这是一个演示： http: //jsfiddle.net/afagx45b/1/

我在 div 上使用了| limit to x过滤器和简单的 ng-if 语句来了解是否单击了 show-more 或 show-less 。ng-repeat您应该能够根据您的需要调整其余部分。

当 show-less 可见时： <div ng-if="showmore" ng-repeat="group in groups | orderBy: 'date'"> 并且 show-more 可见时： <div ng-if="!showmore" ng-repeat="group in groups | orderBy: 'date' | limitTo:3">

编辑：更新以显示如何按日期订购，请查看此线程以获取有关 orderBy 过滤器的更多信息。