提问人：Femina 提问时间：3/23/2016 最后编辑：Femina 更新时间：3/23/2016 访问量：79
ng-repeat 自定义不同样式的显示模式
ng-repeat customize display pattern with different styles
问：
假设我有 n 个项目。前 3 名将跟进不同的风格和物品图像拍摄。接下来的 2 将跟进不同的风格和图像拍摄。接下来的 4 个将属于不同的风格和图像拍摄。我想在 ng-repeat 或通过 custom-directives 中做这个变体行。建议我遵循显示模式的最佳方法是什么。
前任：
(*) (*) (*) // 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>
答：
0赞
Flame_Phoenix
3/23/2016
#1
你的问题需要改进，我建议你具体说明涉及哪些技术，并向我们展示一些代码。
也就是说，我假设这是关于 AngulatJs 的。至于你的服务器端，我不知道。
为了实现这一点，我的建议是让你的服务器向你的 Angular 控制器发送一个带有你想要的模式的数组，然后你只需用它来显示它。ng-repeat
事实上，这是唯一体面的方法，因为它用于循环浏览数据而不是更改数据。ng-repeat
这样的事情应该会有所帮助：
<div ng-repeat="product in productsList">
{{product}}
</div>
另外，我建议阅读一些：
- https://docs.angularjs.org/api/ng/directive/ngRepeat
- http://www.w3schools.com/angular/angular_tables.asp
希望对您有所帮助！
评论
0赞
Femina
3/23/2016
服务器：Servlet （ Java ） 我不想在服务器端处理它，因为它将是一个具有大量项目集合的对象。任何客户端（angular js）方式都会帮助我。
0赞
Flame_Phoenix
3/23/2016
服务器在做什么？客户收到哪些物品（如果有）？
0赞
Femina
3/23/2016
服务器将忙于加载每个请求，其中包含超过 100 个 java （dto） 对象。每个请求的每页和项目计数将有所不同，遵循不建议的常见模式。无论如何，我在客户端中有 100 个项目。为什么我不能跟进客户端中的显示模式（客户端中的每个页面都会跟进不同的模式，如上所述）？
0赞
Flame_Phoenix
3/23/2016
所以，你的客户中有 100 个随机项目，你希望以某种方式订购它们，对吗？
0赞
Flame_Phoenix
3/23/2016
首先，我建议您将此信息添加到问题中（服务器信息以及 jsfiddle）。其次，您将有多少种不同的行样式？
0赞
Thomas Illingworth
3/23/2016
#2
尝试使用 ngClass
<div ng-class="{ 'ItemStyleWith3PerRow': $index % 3 == 0, 'ItemStyleWith2PerRow': $index % 2 == 0, 'ItemStyleWith4PerRow': $index % 4 == 0 }">...</div>
评论
0赞
Femina
3/24/2016
未显示上述模式。样式没有像我们预期的那样实现。
上一个：在受保护时使用基类构造函数
评论