HTML / CSS - складной элемент, который заполняется автоматически

Question

У меня есть набор текстовых элементов, которые генерируются с помощью ngRepeat;они слишком большие.

Вместо этого я хотел бы иметь на их месте складные.Тем не менее, я хотел бы видеть 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

Это скорее задача CSS, чем конкретная задача AngularJS.Идея состоит в том, чтобы установить класс для каждого div, сгенерированного с помощью ng-repeat, и переключить некоторый другой класс, который будет отображать / скрывать этот div независимо, используя свойства CSS overflow и height.

Например, в представлении:

<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