使用 AngularJS 展开和折叠

Question

我正在尝试找出一种使用 AngularJS 进行展开和折叠的方法。如果不在控制器中操作 DOM 对象（这不是 Angular 方式），我一直无法找到一种优雅的方式来执行此操作。

目前我有一个很好的方法来实现一层展开和折叠。但是，当我开始嵌套时，事情变得复杂，并且无法按照我想要的方式工作（在不应该扩展和折叠多个区域时）。

问题出在我不知道如何使用 ng-click 发送唯一标识符以仅展开/折叠正确的内容。我应该提到这些项目在 ng-repeat 中，所以我必须自定义发送的参数。

我能够使用这个 jsfiddle 来帮助我展开和折叠一层。然而，这是一种切换方式，我希望用户能够在扩展其他内容的同时保持扩展。所以我为解决这个问题所做的是使用一个数组，每次点击某物时，该点击项目的索引将被添加到数组中，并且类被扩展。当用户再次单击时，索引将从数组中删除并且该区域被折叠。

我发现另一种方法是使用指令。但是我真的找不到任何例子来说明指令是如何工作的。在编写指令时，我什至不确定如何开始。

我目前的设置是这样的：

 function Dexspander($scope) {
    $scope.ExpandArray = [];

    //Push or pop necessary elements for tracking
    $scope.DespopulatArray = function (identifier, element) {
    if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
        } else {
            $scope.ExpandArray.push(identifier + element);
        }
    }

    //Change class of necessary elements
    $scope.Dexspand = function (identifier, element) {
        if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            return "expand";
        } else {
            return "collapse";
        }
    }
}

<div class="user-header" ng-repeat="user in users">
    <h1 ng-click="DespopulatArray('user', $index)">Expand</h1>
</div>
<div class="user-content" ng:class="Dexspand('user', $index)">
    <div class="content">
        <div class="user-information">
            <div class="info-header">
                <h1 ng-click="DespopulatArray('info', $index)>Some Information</h1>
            </div>
            <div class="info-contents" ng:class="Dexspand('info', $index)">
                stuff stuff stuff stuff...
            </div>
        </div>
    </div>
</div>

此设置的问题是，如果我必须扩展 div 的父级并且它们下面都有要扩展的内容，则单击扩展文本将在两个区域扩展它们，因为它们不是唯一的。

原文由 yaegerbomb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题出在我不知道如何使用 ng-click 发送唯一标识符以仅展开/折叠正确的内容。

您可以通过 $event 使用 ng-click（ng-dblclick 和 ng- 鼠标事件），然后您可以确定是哪个元素引起了事件：

 <a ng-click="doSomething($event)">do something</a>

控制器：

 $scope.doSomething = function(ev) {
    var element = ev.srcElement ? ev.srcElement : ev.target;
    console.log(element, angular.element(element))
    ...
}

---

另见 http://angular-ui.github.com/bootstrap/#/accordion

原文由 Mark Rajcok 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以在 html 中完全解决这个问题：

 <div>
  <input ng-model=collapse type=checkbox>Title
  <div ng-show=collapse>
     Only shown when checkbox is clicked
  </div>
</div>

这也适用于 ng-repeat，因为它将为每个成员创建一个本地范围。

 <table>
  <tbody ng-repeat='m in members'>
    <tr>
       <td><input type=checkbox ng-model=collapse></td>
       <td>{{m.title}}</td>
    </tr>
    <tr ng-show=collapse>
      <td> </td>
      <td>{{ m.content }}</td>
    </tr>
  </tbody>
</table>

请注意，即使 repeat 有自己的作用域，最初它也会从超作用域中继承 collapse 的值。这允许您在一个地方设置初始值，但它可能会令人惊讶。

您当然可以重新设置复选框的样式。参见 http://jsfiddle.net/azD5m/5/

更新小提琴： http: //jsfiddle.net/azD5m/374/ 原始小提琴使用关闭 </input> 标签来添加 HTML 文本标签，而不是使用 <label> 标签。

原文由 Peter Kriens 发布，翻译遵循 CC BY-SA 3.0 许可协议