角度扩展/收缩 div - 不是手风琴或折叠答案

【问题标题】：angular expand/shrink div - not accordian or collapse角度扩展/收缩 div - 不是手风琴或折叠
【发布时间】：2014-12-09 19:42:05
【问题描述】：

使用角度引导。我想确定我没有在这里重新发明轮子，因为我没有发现手风琴或折叠是我想要的。

我正在显示一个大字符串 - 可能是几行 - 但默认情况下，我只想在屏幕上占据两行，并切断其余的字符串。要查看字符串的其余部分，用户将滚动 div 并单击以将其向下展开，从而显示整个内容。

默认值：

[ One AND two AND three OR ]
[ four OR five NOT six ... ]

激活后：

[ One AND two AND three OR ]
[ four OR five NOT six AND ]
[ seven AND eight AND nine ]
[ NOT (ten Or eleven)      ]

与手风琴不同，它不应该有标题，但它应该总是显示一些（两行）内容。与折叠不同，它不应该一直折叠。

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

这里有一些东西可以帮助您入门。 limitTo 过滤器适用于字符，而不是单词（除非您发送数组）。将一些数据放入您的控制器并检查一下。

<div ng-click="expand=!expand">
  <span ng-hide="data.length<=10 || expand">{{data|limitTo:10}} ...</span>
  <span ng-show="data.length<=10 || expand">{{data}}</span>
</div>

【讨论】：

我找到了一种不同的方法来进行实际剪辑。 ng-click 在 20px 和 100% 之间切换包装高度。但我发现这比这要复杂得多。我需要指示“可点击”状态，以便用户知道还有更多。但它应该仅在文本确实延伸到另一行时是可点击的（否则点击是多余的）。所以，它变得非常复杂 - 这让我回到 searchinhg 来寻找现有的插件。