html - tecnologia - url feed rss




Per visualizzare i primi elementi nel feed RSS allo stato di compressione (2)

Puoi usare limitTo come suggerito da @marco Gomes. È possibile impostare inizialmente una variabile su 3 che indicherà ng-repeat per mostrare solo 3 voci rss per impostazione predefinita. Ma quando si attiva la visualizzazione di più, si imposta la variabile sulla lunghezza dell'array per mostrare tutti gli elementi 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;
    };

Esempio di lavoro : http://jsfiddle.net/6b0y3tar/190/

Il mio codice cordova ionico attualmente carica tutti i feed rss e questo fa sì che la mia pagina sia troppo lunga a causa di troppi feed rss.

Quindi, voglio solo visualizzare i primi tre elementi rss su preset (che è in stato collasso) . Quando fai clic su "Altro", si espanderà e visualizzerà tutti gli elementi. Fai di nuovo clic, collasserà e mostrerà solo il primo rss.

Al momento, nessun elemento rss mostra in stato collasso. Mostra tutto in stato espandibile.

Quello che ho richiesto:

  1. Mostra i primi tre articoli rss, ordina con data (ultimo in alto) in stato collasso.

  2. Mostra tutti gli articoli rss quando è espandibile.

il mio modello

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

condizione di collasso. Stato iniziale. (Guarda il segno '+' in blu). Nessuno dei rss è stato mostrato. Voglio i primi 3 feed RSS da visualizzare.

Espandi condizione. Mostrerà tutti i feed rss.

Esempio, il link dei feed rss è il seguente

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

un altro 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;

Nel caso in cui sei confuso con ciò che è collasso ed espandi, questo è l'esempio.

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


Ecco una demo: http://jsfiddle.net/afagx45b/1/

Ho usato il | limit to x | limit to x filtro di ng-repeat insieme a una semplice istruzione ng-if sul div per sapere se è stato fatto clic su show-more o show-less. Dovresti essere in grado di adattare il resto alle tue esigenze.

Quando è visibile show-less: <div ng-if="showmore" ng-repeat="group in groups | orderBy: 'date'"> e mostra più è visibile: <div ng-if="!showmore" ng-repeat="group in groups | orderBy: 'date' | limitTo:3">

Modifica: aggiornato per mostrare come ordinare entro una data, controlla questa discussione per maggiori informazioni sull'ordine. Per filtro.





ionic-framework