Question

所以我理解使用AngularJS扩展和折叠div的复杂想法在某种程度上并非全部。因此，我知道如何在ng中重复和扩展/折叠 - 重复多个对象及其值等。我遇到的问题是，如果我有一个项目已经在ng-repeat中展开，我点击扩展另一个，我希望当前扩展的那个在扩展新的时自动折叠。此外，我应该能够在没有问题的情况下单击同一项目上的展开/折叠。我碰到了一堵墙，我试图抓住一个关于我正在做什么的想法。我的实际工作是通过折叠和扩展工作，唯一我无法得到的就是在扩展另一个项目后让一个项目崩溃。

例如，我从下面提供的临时代码中获取：

VA＆lt; - 将展开/ collaspe（扩展两个城市展示，具有扩展/崩溃的能力）

（关于扩展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

基本思想是有两个范围变量，一个用于扩展的状态，另一个用于扩展的城市。如果用户单击某个州，则展开的状态将折叠，单击状态将展开...对于城市而言相同。

AngularJS折叠扩展另一个上的扩展ng-Repeat项目

1 个答案: