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

标签 javascript css angularjs using-directives

假设我有 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>

最佳答案

你的问题需要改进,建议你具体说明一下涉及到哪些技术,并给我们展示一些代码。

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

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

事实上,据我所知,这是唯一合适的方法,因为 ng-repeat 用于循环数据而不是更改它。

这样的事情应该有帮助:

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

另外,我推荐一些阅读:

希望对你有帮助!

关于javascript - ng-repeat 自定义不同样式的显示模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36180602/

相关文章:

javascript - 如何在网页中使用 Angularjs 设置具有 class 属性和 ng-class 的正确解析的 if 语句?

javascript - ng-click 不适用于 btn 元素

javascript - 如何在 vuetify v-select 中使用图标?

javascript - 使用 Vue.JS v-bind :class with conditional statement of dynamically created array

css - 活跃 child 的 parent 的复杂 CSS 选择器

html - 在绝对 div 下方的 ng-view 中定位 div

javascript - AngularJS UI-路由器 : Abstract state + child states not working

javascript - ASP.NET 和 JavaScript 代码在本地运行,但不能在 IIS 上运行

php - 单击 'Cancel' 按钮后销毁 $_SESSION

html - Virtuemart 电子邮件的布局已损坏,没有样式 - 标题中的 css 不起作用