Как правильно юзать ng-click + ng-show/hide?

Question

[GaserV]

Имеется DOM(ниже). Мне нужно реализовать что-то вроде вопрос-ответ, но ответ открывается при клике на вопрос и скрывается также либо при клике на следующий вопрос. Сейчас проблема в том, что при клике на вопрос открываются сразу все ответы, а нужно только для текущего вопроса.

<div class="options">		
		<div ng-click="showOptions=!showOptions" class="options-title">Вопрос +</div>
		<div ng-show="showOptions" class="options-content">
			<ul>
				<li><span>ответ</span><span class="icon-edit"></span></li>
				<li><span>ответ</span><span class="icon-edit"></span></li>
			</ul>
		</div>
		<div ng-click="showOptions=!showOptions" class="options-title">Вопрос +</div>
		<div ng-show="showOptions" class="options-content">
			<ul>
				<li><span>ответ</span><span class="icon-edit"></span></li>
				<li><span>ответ</span><span class="icon-edit"></span></li>
			</ul>
		</div>
	</div>

И второй вопрос. Можно ли как-то анимировать, чтобы было что-то вроде как jq slideToggle()?

Answer 1

[Дмитрий Кравченко]

Пары вопрос-ответ оформляете в ng-repeat. По клику меняете внутри каждого вопроса параметр, допустим, opened. Для плавности можете использовать ng-class. На открытый элемент вешать класс с CSS transition

Comments

[GaserV]

"По клику меняете внутри каждого вопроса параметр, допустим, opened."
Как собственно это сделать? И не будет ли это лишним, если на открытый вопрос будет вешаться класс? Конкретизируйте пожалуйста)

[Дмитрий Кравченко]

GaserV:

.qa-item(ng-repeat='item in qaArray')
  .question {{item.question}}
  .button(ng-click='item.opened = !item.opened') Show/hide answer
  .answer(ng-class='{"answer_opened":item.opened}') {{item.answer}}

[GaserV]

Дмитрий Кравченко: спасибо большое!)

Answer 2

[Никита Баев]

Задавайте какой-то уникальный ключ для открытия элементов.

Например:

<div ng-click="showOptions1=!showOptions1" class="options-title">Вопрос +</div>
    <div ng-show="showOptions1" class="options-content">
      <ul>
        <li><span>ответ</span><span class="icon-edit"></span></li>
        <li><span>ответ</span><span class="icon-edit"></span></li>
      </ul>
    </div>

Comments

[GaserV]

можно подробнее?