AngularJS Collapse Expanded ng-Repeat item on Expand of another

Question

所以我理解在某种程度上使用 AngularJS 扩展和折叠 div 背后的复杂想法并非全部。所以我知道如何在 ng-repeat 中对多个对象及其值等进行 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'
    }]
  }];

Answer 1

首先，首先： 当使用 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 中你尝试在一个字符串上设置属性......这是行不通的。相反，您应该在“地点”上设置属性

 ng-click="place.expanded= !place.expanded"

这些更改将为您提供展开/折叠行为。为了完成你想要的，我建议你添加一个管理你的折叠/展开行为的函数。 基本思想是您“记住”它们扩展的内容 - 这样您就可以“折叠”先前扩展的元素。或者，您也可以只遍历您的 JSON 数据对象并将所有值重置为折叠状态（如果您有大量数据，您可能不应该这样做。

这里有一个快速的 Plunker 可以完成你想要的：https://plnkr.co/edit/NRInXUJvMZh3ah588WyY?p=preview

基本思想是有两个范围变量，一个用于扩展的州，一个用于扩展的城市。如果用户点击某个州，则展开的州会折叠，点击的州会展开……城市也是如此。