一个模板中的多个提要 - Angularjs 和 Ionic

Question

我正在使用 ionic 创建一个新闻应用程序。主要新闻流是来自 wordpress 站点的 JSON 提要。我的服务器有第二个 JSON 提要用于获取推文。

目标是将推文混合到新闻提要中。所以输出可能看起来像。

新闻文章

推文

新闻文章

推文

新闻文章

我可以使用它，但必须有更好更灵活的方法。我目前有两个问题。

1.) 这两个提要完全不同，因此在控制器中组合它们似乎不是一个选项。

2.) 我需要它具有灵活性，以便可以更改推文的数量和推特提要的数量。

目前我正在拆分新闻提要并使用视图将它们放在一起。这是我目前所拥有的

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

我希望我解释得足够好，你可以提供一些帮助。

Answer 1

将控制器中的两个不同提要混合到同一个数组中确实有意义。你只需要在控制器中用属性标记它们，这样视图就知道通过 ng-if 渲染什么。在此示例中，使用过滤器生成带有数字的随机顺序。

如果您想要一个特定的顺序，即 [3, 3, rest of newsfeed] 就像您上面的示例一样，您可以稍微操纵控制器并删除随机 orderBy 过滤器。如果您喜欢这个，请告诉我，我可以写下来。

编辑 - 将整个新闻提要或推文块移动到 div 发生 ng-if 的地方

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('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));
  });

})

一个模板中的多个提要 - Angularjs 和 Ionic

Multiple feeds in one template - Angularjs and Ionic

json

angularjs

ng-repeat

angularjs-ng-repeat

ionic-framework