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

Question

我是Bootstrap、Angular和Django的新手，所以我会尽可能清楚。我有几个由django循环动态生成的div，每个div都有一个collapse按钮。我将每个按钮的数据目标设置为每个元素的动态属性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 %}

请不要说我一两个月前就开始了网络开发，也是第一次在stackoverflow上发帖，所以请温柔一点。

Answer 1

原来我忘了在collapsediv中传递ng控制器，用于具有collapse函数的控制器。无论如何，谢谢你的帮助！