Mehrere Feeds in einer Vorlage - Angularjs und Ionic

Question

Ich verwende ionic, um eine Nachrichten App der Art zu erstellen. Der Hauptnachrichtenstrom ist ein JSON-Feed von einer Wordpress-Site. Es gibt einen zweiten JSON-Feed von meinem Server, der Tweets abruft.

Ziel ist es, die Tweets in den News-Feed zu mischen. So könnte die Ausgabe aussehen.

Meldung

Meldung

Meldung

tweet

tweet

Meldung

Nachrichtenartikel

tweet

Meldung

Meldung

Ich habe es funktioniert, aber es eine bessere flexibler sein. Ich habe zwei aktuelle Probleme.

1.) die beiden Feeds sind nicht gleich, so dass sie in der Steuerung nicht scheint eine Option zu sein.

2.) Ich brauche es flexibel, damit die Anzahl der Tweets und die Anzahl der Twitter-Feeds geändert werden kann.

Momentan spalte ich den News Feed und benutze die View um alles zusammen zu stellen. Hier ist, was ich bis jetzt habe

<ion-list> 

    <!--3 items from news feed--> 
    <ion-item ng-repeat="post in postSet1"> 
    <a nav-transition="ios" ui-sref="post({post:post})"> 
     <img src="" ng-src="{{post.thumbnail_images.full.url}}" alt="" class="post_thumb" ng-if="post.thumbnail_images.full.url"> 
    </a> 
    <br> 
    <div class="post-meta"> 
     <div class="post-time"> 
     Posted 6 hours ago <i class = "icon icon ion-android-share-alt"></i> 
     <br class="clear"> 
     </div> 
    </div> 
    <a nav-transition="ios" ui-sref="post({post:post})"> 
     <div class="post-text" ng-bind-html="post.title"></div> 
    </a> 
    </ion-item> 

    <!--3 tweets--> 
    <ion-item ng-repeat="tweet in tweets | limitTo:3" class="tweet"> 
    <a nav-transition="ios" ui-sref="post({post:post})"> 
     <div class="left"> 
     <img src="" ng-src="{{tweet.user.profile_image_url}}" alt=""> 
     </div> 

     <div class="right"> 
     <b>{{tweet.user.name}}</b> @{{tweet.user.screen_name}} 
     <br> 
     {{tweet.text}} 
     </div> 
     <br class="clear"> 
    </a> 
    </ion-item> 

    <!--All the rest of the news feed--> 
    <ion-item ng-repeat="post in postSet2 "> 
    <a nav-transition="ios" ui-sref="post({post:post})"> 
     <img src="" ng-src="{{post.thumbnail_images.full.url}}" alt="" class="post_thumb" ng-if="post.thumbnail_images.full.url" > 
     <br> 
     <div class="post-meta"> 
     <div class="post-time"> 
      Posted 6 hours ago <i class = "icon icon ion-android-share-alt"></i> 
      <br class="clear"> 
     </div> 
     </div> 
     <div class="post-text" ng-bind-html="post.title"></div> 
    </a> 
    </ion-item> 

</ion-list> 

Ich hoffe, ich habe das gut genug erklärt und Sie können etwas Hilfe leihen.

Answer 1

Es ist sinnvoll, die zwei verschiedenen Feeds in Ihrem Controller in dasselbe Array zu mischen. Sie müssen sie nur mit einer Eigenschaft im Controller beschriften, damit die Ansicht weiß, was über ng-if gerendert wird. In diesem Beispiel wird ein Filter verwendet, um eine zufällige Reihenfolge mit Zahlen zu generieren.

Wenn Sie eine bestimmte Reihenfolge wünschen, zB [3, 3, Rest des Newsfeed] wie Ihr Beispiel oben, können Sie den Controller etwas manipulieren und den zufälligen orderBy-Filter entfernen. Lassen Sie es mich wissen, wenn Sie das bevorzugen und ich kann es aufschreiben.

EDIT - bewegt die gesamte Newsfeed oder tweet Block innerhalb eines div, wo die ng-wenn

html

<ion-list> 
    <ion-item ng-repeat="post in data | orderBy:random"> 

    <!-- ng-if to render newsfeed template block--> 
    <div ng-if="post.isNewsfeed"> 
     <a nav-transition="ios" ui-sref="post({post:post})"> 
     <img src="" ng-src="{{post.thumbnail_images.full.url}}" alt="" class="post_thumb" ng-if="post.thumbnail_images.full.url"> 
     </a> 
     <br> 
     <div class="post-meta"> 
     <div class="post-time"> 
      Posted 6 hours ago <i class = "icon icon ion-android-share-alt"></i> 
      <br class="clear"> 
     </div> 
     </div> 
     <a nav-transition="ios" ui-sref="post({post:post})"> 
     <div class="post-text" ng-bind-html="post.title"></div> 
     </a> 
    </div> 

    <!-- ng-if to render tweet template block --> 
    <div ng-if="post.isTweet"> 
     <a nav-transition="ios" ui-sref="post({post:post})"> 
     <div class="left"> 
      <img src="" ng-src="{{post.user.profile_image_url}}" alt=""> 
     </div> 

     <div class="right"> 
      <b>{{post.user.name}}</b> @{{post.user.screen_name}} 
      <br> 
      {{post.text}} 
     </div> 
     <br class="clear"> 
     </a> 
    </div> 

    </ion-item> 
</ion-list> 

Controller dank

.controller('NewsfeedCtrl', function($scope, $http, $q, $timeout) { 
    // this is where you control the number of max tweets and max newsfeed items to display 
    angular.extend($scope, { 
    maxTweets: 3, 
    maxNewsfeed: 6, 
    data: [] 
    }); 

    // filter to generate random order in ng-repeat 
    $scope.random = function() { 
    return 0.5 - Math.random(); 
    }; 

    var getTweets = $http.get('http://gettweets.com/api/'); 
    var getNewsfeed = $http.get('http://getnewsfeed.com/api/'); 

    $q.all([getTweets, getNewsfeed]).then(function(res) { 
    var tweets = res[0]; 
    var newsfeed = res[1]; 

    // use max tweets and max newsfeed to cut array 
    tweets = tweets.splice(0, $scope.maxTweets); 
    newsfeed = newsfeed.splice(0, $scope.maxNewsfeed); 

    // mark each tweet or newsfeed as such for ng-if in template 
    tweets.forEach(function(tweet) { tweet.isTweet = true }); 
    newsfeed.forEach(function(item) { item.isNewsfeed = true }); 

    // combine both into a scope variable to be used in an ng-repeat 
    $scope.data = tweets.concat(newsfeed); 
    $timeout(); 
    }, function(err) { 
    console.error(JSON.stringify(err)); 
    }); 

})