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:
Display first three rss items, sort with date(latest on top) in collapse state.
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.