Question

我正在尝试构建类似这样的东西（类似于gmail电子邮件线程）：

 |--------------------------|
 |  first message (clipped) |
 |--------------------------|
 |--------------------------|
 |======= 4 messages  ======| 
 |--------------------------|
 |--------------------------|
 | 2nd last msg (clipped)   |
 |--------------------------|
 | Hello there,             |
 | this is my last message  |
 | complete text is         |
 | displayed                |
 |--------------------------|

您有多条消息，所有消息最初都已折叠，用户只能看到最后一条消息，其中包含第一条和第二条消息的某些部分。当用户单击折叠部分的中心部分时，将展开所有消息。

是否有一个角度自定义指令提供类似的东西，或者我可以使用的一些开源，它将提供展开/折叠选项。我试图避免从头开始写这个。

我看了一下bootstrap手风琴，但它会扩展/折叠整个消息线程。

感谢任何指导/帮助。

谢谢！

Answer 1

使用一些CSS也可以达到预期的效果：

<div class="inbox">
    <div class="message">
      Message 1
     </div>
     <div class="message">
      Message 2
     </div>
     <div class="message">
      Message 3
     </div>
     <div class="message">
      Message 4
     </div> <div class="message">
      Message 5
     </div> <div class="message">
      Message 6
     </div> <div class="message">
      Message 7 - last message
     </div>

</div>

CSS：

.message {
    height: 10px;
    border: 1px solid red;
    overflow: hidden;
}

.message:first-child {
    height: 100px;   
}

.message:last-child {
    height: auto;    
}
}

<强> DEMO

Answer 2

您可以使用两件事：使用css剪切线条大小，或使用角度过滤器来限制最大字符数。

我制作了一个jsbin代码来显示：

http://jsbin.com/ceduji/2/edit?html,css,js,output

使用样式：

li { overflow: hidden; height: 20px; }

使用过滤器：

<ul ng-repeat="item in list">
    <li>{{ item | limitTo: 50 }}</li>
</ul>

Angular js显示gmail，例如重叠的电子邮件线程

2 个答案: