在折叠状态下显示 rss 提要中的前几个项目

Question

我的 cordova ionic 1 代码当前加载了所有 rss 提要，这导致我的页面太长，因为 rss 提要太多。

因此，我只想在预设（处于折叠状态）处显示前三个 rss 项。当点击“更多”时，它将展开并显示所有项目。再次点击，它将折叠并仅显示第一个 rss。

目前，没有任何 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 feeds 链接如下

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

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

您可以在documentation找到更多信息

Answer 2

您可以按照@marco gomes 的建议使用limitTo。您最初可以将变量设置为 3，这将告诉 ng-repeat 默认情况下仅显示 3 个 rss 项目。但是当您切换到查看更多时，我们会将变量设置为数组的长度以显示所有 rss 项目。

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

工作示例：http://jsfiddle.net/6b0y3tar/190/

Answer 3

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

我使用ng-repeat 的| limit to x 过滤器和一个简单的 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">

编辑：更新以显示如何按日期排序，请查看 this thread 了解有关 orderBy 过滤器的更多信息。