Angularjs 显示/隐藏一个动态创建的元素

我有一个我无法解决的简单问题。动态创建了多个元素（见附图），我只需要显示/隐藏我单击的元素的下拉列表内容。 下面的代码通过按下任何按钮显示/隐藏所有元素

我可以通过{{loop.index}}获取for循环的索引，并使用它为每个下拉列表动态创建一个id或将其作为参数传递，但使用它和操作下拉列表内容以显示或隐藏仍然有问题

toggleDropdown（）将isVisible变量设置为true或false，并基于下拉列表显示与否的值

这是我的控制器：

OffersCtrl.$inject = ['PROFILE_ID', '$location'];

function OffersCtrl(PROFILE_ID, $location) {
  let vm = this;

  vm.isVisible = false;
  vm.getText = getText;
  vm.toggleDropdown = toggleDropdown;

  function toggleDropdown() {
    vm.isVisible = !vm.isVisible;
  }
}

这是我的

html/twig

（

OffersCtrl

定义为

$ctrl

）：

{profile.offers%中的offer%

{{offer.title}

€
{{offer.price.convertedAmount}

{{offer.category.name}
{{offer.description}}


.... 

{%endfor%}

您必须使用

isVisible

作为数组，因为您有多个值

angular.module（'app'，[]）
.controller（'ctrl'，function（）{
const vm=这个；
vm.isVisible=[]；
vm.toggleDropdown=toggleDropdown；
vm.offers=[
{说明：'lorem'}，
{说明：'ipsum'}，
{description:'dolor'}，
{description:'sit'}，
{description:'amet'}，
]
功能切换下拉列表（索引）{
vm.isVisible[index]=！vm.isVisible[index]；
}
});



{{offer.description}}


...


谢谢！我所需要的只是使用isVisible作为数组的想法，它只需很少的改动就解决了这个问题。
<ul class="offer-tiles">
    {% for offer in profile.offers %}
    <li>
        <div class="content">
            <p class="title">{{ offer.title }}</p>

            <p class="price">
                <span class="symbol">€</span>
                <span class="value">{{ offer.price.convertedAmount }}</span>
            </p>

            <p class="description">{{ offer.category.name }}</p>

            <input type="button" id="expandBtn" class="expand" value="v" ng-click="$ctrl.toggleDropdown()" />
        </div>
        <div class="box-dropdown" ng-show="$ctrl.isVisible">
            <p>{{ offer.description }}</p>
            <hr/>
            .... 
        </div>
    </li>
    {% endfor %}
</ul>