angularjs如何使用ng-repeat创建div堆栈
简而言之,我有一个用ng-repeat创建的div列表。
- {{value.keys}}
哪个显示如下: Plunker
但这有可能使它们像这样堆叠吗? :
我想我必须为每个div动态设置位置和z-index。 但我不确定这是否可能,如果是,那么如何? 如果有任何解决方案,这将是很好的。
如果需要jQuery / js它也会没问题。
我认为你可以使divs绝对相对于容器位置,然后像这样使用ngStyle指令:
- {{value.keys}}
所以这里的关键是ngStyle表达式:
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}"
尤其是z-index
部分。
演示1: http : //plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview
演示2:这是一个来自后续问题的演示,带有很好的添加/删除卡片动画:)
以下内容将在卡片列表中重复,每次迭代时将z-index,top和left全部增加1,使用$ index作为当前卡片位置的参考。 根据您的卡片需要布局的方式,您可能需要做一些cards.length - $index
来反转它。
这些方面的东西应该做你想要的。
- {{value.keys}}
您可以在结合中使用ng-style
指令和$index
变量:
- {{value.keys}}
当你从0开始下降时,这将使z-index增加1。