所以我在某种程度上理解使用 AngularJS 展开和折叠 div 背后的复杂想法,但并非全部。所以我知道如何在 ng-repeat 中展开/折叠多个对象及其值等。我遇到的问题是,如果我已经在 ng-repeat 中展开了一个项目,然后单击展开另一个项目,我希望当前展开的那个在新展开时自动折叠。另外,我应该能够毫无问题地单击同一项目上的展开/折叠。我碰壁了,我试图重新思考我在做什么。我的实际工作是通过折叠和展开来工作,我唯一无法得到的就是当我展开另一个项目时,一个项目会折叠起来。
例如,从我在下面提供的从头代码开始:
VA <- 将展开/折叠(展开时两个城市显示具有展开/折叠的能力)
(关于 VA 的扩展)
Virginia Beach
Richmond <- I expand Richmond then
现在我想扩大弗吉尼亚海滩,一旦我这样做,里士满就会崩溃,弗吉尼亚海滩就会扩大
同样的想法将适用于各州,一旦我扩大 TX,VA 就必须崩溃。
这就是我需要帮助理解的内容。
概念理念:
<div class="" ng-repeat="place in data">
<h4 class="">{{place.state}}</h4>
<button class="btn" ng-click="{{place.state}}.expanded=!{{place.state}}.expanded)">
<span ng-class="{'glyphicon glyphicon-minus': {{place.state}}.expanded, 'glyphicon glyphicon-plus': !{{place.state}}.expanded }"></span>
</button>
<div class="" ng-hide="{{place.state}}.expanded">
<table class="">
<thead>
<tr class="">
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{place.value}}</td>
</tr>
</tbody>
</table>
</div>
<div class="" ng-repeat="city in data.city">
<h4 class="">{{city.cName}}</h4>
<button class="btn" ng-click="city.expanded=!city.expanded)">
<span ng-class="{'glyphicon glyphicon-minus': city.expanded, 'glyphicon glyphicon-plus': !city.expanded }"></span>
</button>
<div class="" ng-hide="city.expanded">
<table class="">
<thead>
<tr class="">
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{city.pop}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
测试数据JSON:
$scope.data = [{
"state": "VA",
"value": '14',
"city": [{
"cName": 'Virginia Beach',
"pop": '650,000'
}, {
"cName": 'Richmond',
"pop": '850,000'
}]
}, {
"state": "TX",
"value": '31',
"city": [{
"cName": 'Austin',
"pop": '990,000'
}, {
"cName": 'Houston',
"pop": '1,450,000'
}]
}];
最佳答案
好吧,首先要做的事情是: 当使用 ng-click、ng-show 或任何 ng-attribute 时,您不使用 {{}} - 这些值将自动正确解释。
所以你不想写
ng-click="{{place.state}}.expanded=!{{place.state}}.expanded)"
而是(最后多了一个“)”
ng-click="place.state.expanded= !place.state.expanded"
另外 - 你使用了一个很棒的 ng-repeat - 但是 - 在你的 ng-click 中你尝试在字符串上设置属性......这是行不通的。相反,您应该将属性设置为“place”
ng-click="place.expanded= !place.expanded"
这些更改将为您提供展开/折叠行为。为了实现您想要的目标,我建议您添加一个管理折叠/展开行为的函数。 基本思想是您“记住”它们展开的内容 - 这样您就可以“折叠”之前展开的元素。或者,您也可以迭代 JSON 数据对象并将所有值重置为折叠(如果您有大量数据,您可能不应该这样做。
这是一个快速的 Plunker,可以完成您想要的任务:https://plnkr.co/edit/NRInXUJvMZh3ah588WyY?p=preview
基本思想是有两个范围变量,一个用于扩展的州,一个用于扩展的城市。如果用户单击一个州,则展开的州会折叠,单击的州会展开......对于城市来说也是如此。
关于javascript - AngularJS Collapse Expanded ng-在另一个展开上重复项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41643283/