时间戳

首页 > 解决方案 > 显示/隐藏动态创建的元素之一

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

<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">€&lt;/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>

标签： angularjsng-show

解决方案

您必须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>

推荐阅读