用 Angular js 展开和折叠答案

【问题标题】：Expand and collapse with angular js用 Angular js 展开和折叠
【发布时间】：2012-09-18 04:17:55
【问题描述】：

我正在尝试找出一种使用 Angular 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 并且它们下方都有要扩展的内容，则单击展开文本将在两个区域中展开它们，因为它们不是唯一的。

【问题讨论】：

你能在 plunker 上举个例子吗？那我也许可以帮你做一个指令。以此为基础：plnkr.co/edit/gist:3662656

标签： javascript expand collapse angularjs

【解决方案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> 标签。

【讨论】：

你为什么认为这些类型的指令无处不在？有点好奇。
@Sridhar 你在说什么指令？没有得到问题

【解决方案2】：

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

您可以通过 ng-click（ng-dblclick 和 ng-mouse 事件）传递$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

【讨论】：

可能对某些人有用。这是一个教程。 aneejian.com/angular-js-custom-directive-expand-collapse

【解决方案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>

【讨论】：

【解决方案4】：

我刚刚使用 Angular 使用 ng-show、ng-click 和 ng-init 编写了一个简单的 zippy/collapsable。它实现了一个级别，但可以轻松扩展到多个级别。

为 ng-show 分配一个布尔变量，并在点击标题时切换它。

看看here

【讨论】：

【解决方案5】：

这里有一个使用 ng-repeat 的 Angular JS 简单易用的解决方案，可能会有所帮助。

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {

  $scope.arr= [
    {name:"Head1",desc:"Head1Desc"},
    {name:"Head2",desc:"Head2Desc"},
    {name:"Head3",desc:"Head3Desc"},
    {name:"Head4",desc:"Head4Desc"}
    ];
    
    $scope.collapseIt = function(id){
      $scope.collapseId = ($scope.collapseId==id)?-1:id;
    }
});

/* Put your css in here */
li {
  list-style:none;
  padding:5px;
  color:red;
}
div{
  padding:10px;
  background:#ddd;
}

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Simple Collapse</title>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
  <li ng-repeat='ret in arr track by $index'>
    <div ng-click="collapseIt($index)">{{ret.name}}</div>
    <div ng-if="collapseId==$index">
      {{ret.desc}}
    </div>
  </li>
</ul>
</body>
</html>

这应该满足您的要求。这是一个工作代码。

Plunkr 链接 http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview

Github：https://github.com/deepakkoirala/SimpleAngularCollapse

【讨论】：

【解决方案6】：

在html中

button ng-click="myMethod()">Videos</button>

角度

 $scope.myMethod = function () {
         $(".collapse").collapse('hide');    //if you want to hide
         $(".collapse").collapse('toggle');  //if you want toggle
         $(".collapse").collapse('show');    //if you want to show
}

【讨论】：

这不是“角度”。那是“在 jquery 中”