想要在扩展之前显示前三个RSS新闻

Question

当用户点击“加号”或“减号”时，我的代码能够扩展和缩小。但是，我想要节目

1. 在展开之前，会显示前三个RSS新闻。展开后，显示所有rss新闻。

2. 除了ion-plus和ion-minus

之外，我想要显示文本'More'和'Less' 扩展前

：



展开后

：



这是我的代码：

HTML

<div class="card">
  <div class="item item-divider">News</div>
  <a class="item item-icon-right" ng-if='showMoreNews'ng-repeat="story in stockNews| orderBy: 'pubDate':true" ng-click="openNews(story.link)">
    <h2>{{story.title || ''}}</h2>
    <h6>{{story.pubDate | characters:17:false:false || 'N/A'}}</h6>
    <p ng-if="story.description.length > 0">{{story.description | htmlToPlaintext}}</p>
    <!-- <i class="icon ion-ios-arrow-right"></i> -->
  </a>
  <div ng-click="toggleNews()" <i class="icon" ng-class="showMoreNews ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMoreNews ? 'Less' : 'More'"></i></div>
</div>

AngularJS

  $scope.showMoreNews = false;
    $scope.toggleNews = function(){
      $scope.showMoreNews = !$scope.showMoreNews;
    };

请告知如何使其成为理想的结果？

更新

与@SAJ建议 以下是showNews和showMoreNews的代码。 它显示3列列表，但rss新闻项目中没有任何内容只是一个空白列表

http://i.imgur.com/5FhNk2l.png

HTML

<div class="card">
  <div class="item item-divider">News</div>
  <a class="item item-icon-right" ng-if='showNews($index)' ng-repeat="story in stockNews| orderBy: 'pubDate':true" ng-click="openNews(story.link)">
    <div ng-if='showMoreNews'>
    <h2>{{story.title || ''}}</h2>
    <h6>{{story.pubDate | characters:17:false:false || 'N/A'}}</h6>
    <p ng-if="story.description.length > 0">{{story.description | htmlToPlaintext}}</p>
  </div>
    <!-- <i class="icon ion-ios-arrow-right"></i> -->
  </a>
  <div ng-click="toggleNews()" <i class="icon" ng-class="showMoreNews ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMoreNews ? 'Less' : 'More'"></i></div>
</div>

Answer 1

你可以在ng-repeat元素中创建一个div块，并添加一个逻辑来隐藏项目，如果循环项目的索引大于2.当$ scope.showMoreNews为true时，这些将是可见的。您可以在html中使用$ index来获取ng-repeat

中循环项的索引

  

所以你的html看起来像这样

<a class="item item-icon-right" ng-repeat="story in stockNews | orderBy: 'pubDate':true" ng-click="openNews(story.link)">
  <div ng-if='showNews($index)' >
      <h2>{{story.title || ''}}</h2>
      <h6>{{story.pubDate | characters:17:false:false || 'N/A'}}</h6>
      <p ng-if="story.description.length > 0">{{story.description | htmlToPlaintext}}</p>
  </div>
</a>

  

在您的控制器中

    $scope.showNews = function(index){
         return index <= 2 || $scope.showMoreNews
        };