我是Bootstrap,Angular和Django的新手,所以我会尽量让自己尽可能清楚。我有几个动态生成的div由django循环,并为每个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" %} <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上发布,所以请保持温和。
答案 0 :(得分:0)
事实证明,我忘了在崩溃div中传递ng-controller,用于具有我的折叠功能的控制器。无论如何,谢谢你的帮助!