Question

考虑我有n个项目。前三个将跟进不同的风格和项目图像拍摄。接下来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>

Answer 1

您的问题需要改进，我建议您指明所涉及的技术并向我们展示一些代码。

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

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

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

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

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

另外，我推荐一些阅读：

希望它有所帮助！

Answer 2

尝试使用ngClass

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

ng-repeat自定义具有不同样式的显示模式

2 个答案: