ng-repeat 自定义不同样式的显示模式答案

【问题标题】：ng-repeat customize display pattern with different stylesng-repeat 自定义不同样式的显示模式
【发布时间】：2016-03-23 14:12:55
【问题描述】：

考虑我有 n 个项目。前 3 将跟进不同的风格和项目图像拍摄。接下来的2将跟进不同的风格和图像拍摄。接下来的4个将属于不同的风格和图像拍摄。我想在 ng-repeat 或通过自定义指令中排列这种变体。建议我遵循显示模式的最佳方式。

例如：

 (*) (*) (*) // Medium Image
  (@)  (@)  // Big Image
(.) (.) (.) (.) // small Image

....这种模式必须对所有 n 个项目重复，并带有分页。

    <li ng-repeat="data in arrivCtrl.content"> // here getting list of objects with item details
    <div class="ItemStyleWith3PerRow" ng-if="$index % 3 == 0" >...</div>
    <div class="ItemStyleWith2PerRow" ng-if="$index % 2 == 0" >... </div>
    <div class="ItemStyleWith4PerRow" ng-if="$index % 4 == 0" >... </div>
    </li>

【问题讨论】：

请考虑添加一些代码。
哦，当然。添加。 @Michelem

标签： javascript css angularjs using-directives

【解决方案1】：

您的问题需要改进，建议您具体说明涉及的技术并给我们看一些代码。

这就是说，我是assuming，这是关于 AngulatJs 的。至于你有什么服务器端，我不知道。

我的建议是让你的服务器向你的 Angular 控制器发送一个包含你想要的模式的数组，然后你只需使用ng-repeat 来显示它。

事实上，这是唯一不错的方法，因为ng-repeat 用于循环访问数据而不是更改数据。

这样的事情应该会有所帮助：

<div ng-repeat="product in productsList">
    {{product}}
</div>

另外，我推荐一些阅读：

希望对你有帮助！

【讨论】：

Server: Servlets ( Java ) 我不想在服务器端处理它，因为它会是一个包含大量项目集合的对象。任何客户端（角度js）方式都会帮助我。
服务器在做什么？客户收到哪些物品（如果有）？
服务器将忙于加载超过 100 个 java (dto) 对象的每个请求。每页和项目计数将根据每个请求而有所不同，遵循不建议使用的常见模式。无论如何，我在客户端有 100 个项目。为什么我不能在客户端跟进显示模式（客户端的每个页面都会跟进不同的模式）？
那么，您的客户中有 100 件随机商品，您希望以某种方式订购它们，对吧？
首先我建议您将此信息添加到问题中（服务器信息以及jsfiddle）。其次，你会有多少种不同的行样式？

【解决方案2】：

尝试使用 ngClass

<div ng-class="{ 'ItemStyleWith3PerRow': $index % 3 == 0, 'ItemStyleWith2PerRow': $index % 2 == 0, 'ItemStyleWith4PerRow': $index % 4 == 0 }">...</div>

【讨论】：

上述模式未显示。样式没有像我们预期的那样实现。