html राष्ट्रीय - पतन राज्य में आरएसएस फ़ीड में पहले कुछ आइटम प्रदर्शित करने के लिए




शामिल लिस्ट (4)

मेरा कॉर्डोवा इयनिक 1 कोड वर्तमान में सभी आरएसएस फ़ीड लोड करता है और इस कारण से बहुत सारे आरएसएस फीड्स के कारण मेरा पृष्ठ बहुत लंबा है।

इस प्रकार, मैं सिर्फ प्रीसेट पर पहले तीन आरएसएस आइटम प्रदर्शित करना चाहता हूं (जो पतन राज्य में है) । जब 'अधिक' पर क्लिक करें, यह सभी वस्तुओं का विस्तार और प्रदर्शित करेगा। फिर से क्लिक करें, यह पतन और केवल पहली आरएसएस दिखाएगा।

वर्तमान में, कोई आरएसएस आइटम पतन राज्य में नहीं दिखाता है। यह विस्तार योग्य स्थिति में सभी दिखाता है

मुझे क्या चाहिए:

  1. पश्चात राज्य में तिथि के अनुसार क्रमबद्ध (पहले शीर्ष पर) पहले तीन आरएसएस आइटम प्रदर्शित करें।

  2. सभी आरएसएस आइटम प्रदर्शित करें जब यह विस्तार योग्य राज्य होता है

मेरे टेम्पलेट

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

ढहने की स्थिति। आरंभिक स्थिति। (नीले रंग में '+' साइन इन करें)। आरएसएस में से कोई भी नहीं दिखाया गया था। मुझे पहले 3 आरएसएस प्रदर्शित करना चाहते हैं।

हालत बढ़ाएं यह सभी आरएसएस फ़ीड दिखाएगा

उदाहरण, आरएसएस फ़ीड लिंक निम्नानुसार है

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

दूसरे जेएस

    $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/


Answers

कोणीय एक limitTo:limit साथ आता है limitTo:limit फिल्टर, यह पहले एक्स आइटम और पिछले एक्स आइटम सीमित समर्थन:

 <a class="item item-icon-right" ng-if='showmore' ng-repeat="item in rssNews| limitTo:1 | orderBy: 'pubDate':true" ng-click="openitems(item.link)">

आप दस्तावेज़ीकरण में अधिक जानकारी पा सकते हैं


आप limitTo द्वारा सुझाए गए अनुसार limitTo उपयोग कर सकते हैं आप शुरू में 3 को एक वैरिएबल निर्धारित कर सकते हैं जो ng-repeat को बताएगा कि केवल 3 आरएसएस आइटम डिफ़ॉल्ट रूप से दिखाए जाएंगे। लेकिन जब आप अधिक देखने के लिए टॉगल करते हैं, तो हम सभी आरएसएस आइटम दिखाने के लिए वेरिएबल को लंबाई में सेट कर देंगे।

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>

जेएस :

 $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/


यहां एक डेमो है: http://jsfiddle.net/afagx45b/1/

मैंने प्रयोग किया | limit to x ng-repeat के | limit to x फिल्टर की | limit to x ng-repeat एक सरल एनजी-अगर बयान के साथ पता करने के लिए कि शो-अधिक या शो-कम क्लिक किया गया है। आप अपनी आवश्यकताओं के लिए बाकी को अनुकूलित करने में सक्षम होना चाहिए

जब दिखाना कम दिखाई दे रहा है: <div ng-if="showmore" ng-repeat="group in groups | orderBy: 'date'"> और दिखाना अधिक दिखता है: <div ng-if="!showmore" ng-repeat="group in groups | orderBy: 'date' | limitTo:3">

संपादित करें: किसी तिथि से आदेश कैसे दिखाए जाने के लिए अपडेट किया गया है, इस थ्रेड को ऑर्डर करके अधिक जानकारी के लिए फ़िल्टर करें।


मैं एक और विकल्प, एनजी मानचित्र का सुझाव देता हूं।

मैंने अपने स्वयं के प्रोजेक्ट के लिए एक Google मानचित्र angularjs निर्देशक , ng-map नामक निर्देश बनाया है। सरल कार्यक्षमता के लिए इसे किसी भी जावास्क्रिप्ट कोडिंग की आवश्यकता नहीं है।

आरंभ करना

एक। Ng-map.js या ng-map.min.js Download और शामिल करें

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

दो। map टैग, और वैकल्पिक रूप से, control , marker , और shape टैग का उपयोग करें

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</ng-map>`  

उदाहरण

अपने ऐप में इसका इस्तेमाल करने के लिए, बस अपने ऐप पर निर्भरता के रूप में 'ngMap' शामिल करें।

var myApp = angular.module('myApp', ['ngMap']);

आशा करता हूँ की ये काम करेगा

-------------- संपादित करें -------------------

उन लोगों के लिए जो कोणीय 2 संस्करण की तलाश में हैं,
ng2-map https://ng2-ui.github.io/#/google-map







html angularjs cordova ionic-framework