折叠所有元素的角度/引导折叠按钮

Question

我是 Bootstrap、Angular 和 Django 的新手，所以我会尽量讲清楚。我有几个由 django 循环动态生成的 div，每个 div 都有一个折叠按钮。我将每个按钮的数据目标设置为每个元素的动态属性 id（我使用一个 django 变量，该变量被拉入循环），但无论我按下什么按钮，所有 div 都将被折叠/展开。

{% for country in countries %}
<div class="container">
    <div class="row">
        <div class="country-panel col-xs-12" style="background:url({{ country.country_image}}) no-repeat; position: relative;">
            <div class="row">
                <div class="country-name col-xs-4 col-xs-offset-4">
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="title">{{ country.name | upper }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="row">
            <div class="description-panel col-xs-12">
                <div class="row">
                    <p class="content">{{ country.content }}</p>
                </div>
                <div class="row">
                    {% for city in country.cities %}
                        {% if forloop.counter <= 3 %}
                            {% if forloop.counter < 3 %}
                                <a><div class="col-xs-4 city-block right" style="background:url({{city.image}}) no-repeat; position: relative; z-index: 0;">
                            {% elif forloop.counter == 3 %}
                                <a><div class="col-xs-4 city-block" style="background:url({{city.image}}) no-repeat; position: relative; z-index: 0;">
                            {% endif %}
                                    <div class="city-layer"></div>
                                    <span class="city-name">{{city.name | upper}}</span>
                                </div></a>
                        {% endif %}
                    {% endfor %}
                </div>  
                    <div class="row" uib-collapse="isCollapsed" id="{{country.name}}">
                        {% for city in country.cities %}
                            {% if forloop.counter > 3 %}
                                {% if forloop.counter|divisibleby:3 %}
                                <a><div class="col-xs-4 city-block" style="background:url({{city.image}}) no-repeat; position: relative; z-index: 0;">
                                {% else %}
                                <a><div class="col-xs-4 city-block right" style="background:url({{city.image}}) no-repeat; position: relative; z-index: 0;">
                                {% endif %}
                                    <div class="city-layer"></div>
                                    <span class="city-name">{{city.name | upper}}</span>
                                </div></a>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="content">{{country.description}}</p>
                            <p><div class="col-xs-2 col-xs-offset-10"><a class="btn-default pink-button more-cities col-xs-12" role="button" type="button" ng-click="isCollapsed = !isCollapsed" data-target="#{{country.name}}">{% trans "MORE CITIES" %}&nbsp<span class="fa fa-plus"></span></a></div></p>
                        </div>
                    </div>
                    <div class="button-separator col-xs-12"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

请不要说我在一两个月前就开始了 Web 开发，而且也是第一次在 stackoverflow 上发帖，所以请保持温和。

Answer 1

原来我忘记在折叠 div 中传递 ng-controller，用于具有折叠功能的控制器。无论如何，感谢您的所有帮助！