使用角度js展开和折叠 [英] Expand and collapse with angular js

问题描述

我试图找出一种使用角度js进行展开和折叠的方法。如果不操纵控制器中的dom对象（这不是角度方式），我无法找到一种优雅的方法。目前我有一个很好的方法来进行一层扩展和折叠。然而，当我开始嵌套时，事情变得复杂并且不能按照我想要的方式工作（当它们不应该扩展和折叠多个区域时）。我不知道如何通过ng-click发送唯一标识符来扩展/折叠正确的内容。我应该提一下这些项目都在ng-repeat中，所以我必须自定义发送的参数。

I am trying to figure out a way to do an expand and collapse using angular js. I haven't been able to find an elegant way to do this without manipulating dom objects in the controller (which is not the angular way). Currently I have a nice way to do it for a one layer expand and collapse. However when I start nesting, things get complicated and don't work the way I want it to (expanding and collapsing multiple areas when they shouldn't be). The problem comes in by me not knowing how to send a unique identifier with an ng-click to only expand/collapse the right content. I should mention that these items are in an ng-repeat so I can necessarily customize parameters being sent.

我能够使用这个 jsfiddle 帮助我进行一层扩展和崩溃工作。然而，这是一种切换方式，我希望用户能够在扩展其他内容时保持扩展。所以我要做的就是使用一个数组，每次点击某个东西时，点击的项目的索引就会被添加到数组中并且类会被展开。当用户再次单击时，索引已从数组中删除，并且该区域已折叠。

I was able to use this jsfiddle to help me get a one layer expand and collapse to work. However this is a toggle way to do it and I want the user to be able to keep things expanded while expanding others. So what I did to fix this was use an array of and every time something is clicked the index of that clicked item would be added to the array and the class expanded. When the user clicked again the index was removed from the array and the area was collapsed.

我发现您可以执行此操作的另一种方法是使用指令。但我真的找不到任何一个例子来包围指令如何工作。我不确定在编写指令时如何开始。

Another way I found that you can do it is by using directives. But I can't really find any exampled to wrap my head around how directives work. I am not sure how to even start when it comes to writing directives.

我目前的设置是：

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并且它们都有扩展的东西，单击展开文本将在两个区域展开它们，因为它们不是唯一的。

The issue with this setup is that if I have to parent divs expanded and those both have something under them to expand, clicking the expand text will expand them in both areas as they are not unique.

推荐答案

我不知道如何通过ng-click发送唯一标识符来扩展/折叠正确的内容。

The problem comes in by me not knowing how to send a unique identifier with an ng-click to only expand/collapse the right content.

您可以通过ng-click（ng-dblclick和ng-mouse事件）传递 $ event ），然后你可以确定导致事件的元素：

You can pass $event with ng-click (ng-dblclick, and ng- mouse events), then you can determine which element caused the event:

<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

这篇关于使用角度js展开和折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！