操作 ng-repeat 的输出答案

【问题标题】：Manipulating the Output of ng-repeat操作 ng-repeat 的输出
【发布时间】：2014-06-09 12:06:35
【问题描述】：

我正在开发一个将用作社交媒体仪表板的 Angular 应用程序。它将根据搜索条件从 Twitter、Instagram 和 Flickr 加载和显示内容。

我正在加载每个资源并将结果存储在一个名为 $scope.items 的数组中，然后在我看来，我将它们呈现如下：

<div ng-repeat="item in items | orderBy:'galleryTimestamp':true">
    <p ng-if="item.galleryType=='instagram'">Instagram Photo</p>
    <p ng-if="item.galleryType=='twitter'">Twitter Post</p>
    <p ng-if="item.galleryType=='flickr'">Flickr Photo</p>
</div>

这工作得很好，但我想对它的渲染方式有更多的控制。理想情况下，我想控制来自每个来源的内容的混合。现在，它会连续吐出 5 条推文，然后是 6 张 Instagram 照片，然后是 10 条推文，然后是 Flickr 照片。

有什么方法可以操纵我的$scope.items 数组或过滤或排序这些数组，以使页面看起来更像 [Instagram 照片] [Tweet] [Flickr 照片] 等等......在集合上重复。

【问题讨论】：

你可以为所欲为吗？我不确定你的意思。

标签： javascript angularjs

【解决方案1】：

您应该在您的范围内重组您的 items 属性，以按照您想要的方式循环播放，在本例中为 [Instagram Photo][Tweet][Flickr Photo]。在这种情况下，我会避免使用 ng-if，而只是将项目重组为：

items = {
    instagram: 'instagram thing',
    tweet: 'tweet thing',
    flickr: 'flicker thing'
}

【讨论】：