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:这是一个来自后续问题的演示,带有很好的添加/删除卡片动画:)

http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview

以下内容将在卡片列表中重复,每次迭代时将z-index,top和left全部增加1,使用$ index作为当前卡片位置的参考。 根据您的卡片需要布局的方式,您可能需要做一些cards.length - $index来反转它。

 

这些方面的东西应该做你想要的。

 
  • {{value.keys}}

您可以在结合中使用ng-style指令和$index变量:

 
  • {{value.keys}}

当你从0开始下降时,这将使z-index增加1。