javascript - AngularJS Collapse Expanded ng-在另一个展开上重复项目

Question

所以我在某种程度上理解使用 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'
    }]
  }];

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 中你尝试在字符串上设置属性......这是行不通的。相反，您应该将属性设置为“place”

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

这些更改将为您提供展开/折叠行为。为了实现您想要的目标，我建议您添加一个管理折叠/展开行为的函数。基本思想是您“记住”它们展开的内容 - 这样您就可以“折叠”之前展开的元素。或者，您也可以迭代 JSON 数据对象并将所有值重置为折叠(如果您有大量数据，您可能不应该这样做。

这是一个快速的 Plunker，可以完成您想要的任务:https://plnkr.co/edit/NRInXUJvMZh3ah588WyY?p=preview

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