使用角度js展开和折叠

Question

我试图找出一种使用角度js进行展开和折叠的方法.如果不操纵控制器中的dom对象(这不是角度方式),我无法找到一种优雅的方法.目前我有一个很好的方法来进行一层扩展和折叠.然而,当我开始嵌套时,事情变得复杂并且不能按照我想要的方式工作(当它们不应该扩展和折叠多个区域时).我不知道如何通过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并且它们都有扩展的东西,单击展开文本将在两个区域中展开它们,因为它们不是唯一的.

Answer 1

你可以在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>

请注意,即使重复有自己的范围,最初它将从超范围继承崩溃的值.这允许您在一个地方设置初始值,但这可能会令人惊讶.

你当然可以重新选中复选框.见http://jsfiddle.net/azD5m/5/

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

Answer 2

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

您可以通过$eventng-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

Answer 3

见http://angular-ui.github.io/bootstrap/#/collapse

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = false;
}



<div ng-controller="CollapseDemoCtrl">
    <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr>
    <div collapse="isCollapsed">
        <div class="well well-large">Some content</div> 
    </div>
</div>