Question

我有一堆使用ngRepeat生成的文本div；他们太大了。

相反，我想使用可折叠的东西。但是，我想从按钮上方的文本中看到2-3个句子，其余的都可以折叠。

<div>TEXT I WANT VISIBLE</div>

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">TEXT I WANT COLLAPSED</div>

执行此操作的最佳方法是什么？至关重要的是，我不想手动选择哪些文本可折叠，哪些文本不会-我正在寻找一种自动创建这对元素的方法。

Answer 1

这比AngularJS特定任务更多，是CSS任务。这个想法是在通过ng-repeat生成的每个div上设置一个类，并使用overflow和height CSS属性切换将单独显示/隐藏该div的其他类。

例如，在视图中：

<div ng-repeat="item in items">
  <p class="container" ng-class="{'show': item.visible}">{{item.text}}</p>
  <button ng-click="item.visible = !item.visible">Show more</button>
</div>

在控制器中：

$scope.items = [
    {allShown: false, text: 'long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'},
    {allShown: false, text: 'other long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'},
    {allShown: false, text: 'another long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'}
  ];

以及相关的样式：

.container {
  height: 32px;
  overflow: hidden;
}
.show {
   overflow: visible;
   height: auto;
}

这是一个例子：https://plnkr.co/edit/23cMOs9gykp094A2sISD

HTML / CSS-可自动填充的可折叠元素

1 个答案: