Show/hide 动态创建的元素之一

Question

我有一个我无法解决的简单问题。动态创建了多个元素（见附图），我只需要 show/hide 我点击的元素的下拉内容。下面的代码是 showing/hiding 按任何按钮的所有元素。

我可以通过 {{ 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）：

<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>

Answer 1

您必须使用 isVisible 作为数组，因为您有多个值。

angular.module('app', [])
  .controller('ctrl', function() {
    const vm = this;

    vm.isVisible = [];
    vm.toggleDropdown = toggleDropdown;
    vm.offers = [
      {description: 'lorem'},
      {description: 'ipsum'},
      {description: 'dolor'},
      {description: 'sit'},
      {description: 'amet'},
    ]

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

<div ng-app="app" ng-controller="ctrl as vm">
  <ul class="offer-tiles">
    <li ng-repeat="offer in vm.offers track by $index">
        <!-- ... -->
        <input type="button" value="v" ng-click="vm.toggleDropdown($index)" />
        <div class="box-dropdown" ng-show="vm.isVisible[$index]">
            <p>{{ offer.description }}</p>
            <hr />
            ...
        </div>
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

Show/hide 动态创建的元素之一

Show/hide one of the dynamically created elements

angularjs

ng-show