Javascript 使用角js展开和折叠

我正试图找到一种使用angular js进行展开和折叠的方法。如果不在控制器中操纵dom对象（这不是角度方式），我就无法找到一种优雅的方法来实现这一点。目前，我有一个很好的方法来实现一层的展开和折叠。然而，当我开始嵌套时，事情会变得复杂，并且不能按我希望的方式工作（在不应该的情况下扩展和折叠多个区域）。问题是，我不知道如何通过ng单击发送唯一标识符以仅展开/折叠正确的内容。我应该提到的是，这些项目是在一个ng的重复，所以我可以自定义发送的参数

我能够用它来帮助我得到一个单层的展开和折叠来工作。但是，这是一种切换方式，我希望用户能够在扩展其他内容的同时保持内容的扩展。因此，我所做的修复是使用一个数组，每次单击某个内容时，该单击项的索引将添加到该数组中，并扩展该类。当用户再次单击时，索引从数组中移除，区域被折叠

我发现另一种方法是使用指令。但我真的找不到任何例子来解释指令是如何工作的。我甚至不知道如何开始编写指令

我目前的设置如下：

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>

函数Dexspander（$scope）{
$scope.ExpandArray=[]；
//推送或弹出跟踪所需的元素
$scope.DespopulatArray=函数（标识符，元素）{
if（u.indexOf（$scope.ExpandArray，标识符+元素）！=-1）{
$scope.ExpandArray.splice（u.indexOf（$scope.ExpandArray，标识符+元素），1）；
}否则{
$scope.ExpandArray.push（标识符+元素）；
}
}
//更改必要元素的类别
$scope.Dexspand=函数（标识符，元素）{
if（u.indexOf（$scope.ExpandArray，标识符+元素）！=-1）{
返回“扩展”；
}否则{
返回“崩溃”；
}
}
}
扩大
问题是，我不知道如何通过ng单击发送唯一标识符以仅展开/折叠正确的内容

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

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


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

为ng show分配一个布尔变量，并在单击标题时将其切换

看看
请参见

函数CollapseDemoCtrl（$scope）{
$scope.isCollapsed=false；
}
切换折叠

一些内容
您可以在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>


{{m.title}}
{{m.content}}

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

当然，您可以重新设置复选框的样式。看

更新的fiddle:原始fiddle使用关闭
标记来添加HTML文本标签，而不是使用
标记。
这里有一个简单易用的解决方案，使用ng repeat可以帮上忙


var-app=angular.module（'myapp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.arr=[
{name:“Head1”，desc:“Head1Desc”}，
{name:“Head2”，desc:“Head2Desc”}，
{名称：“Head3”，描述：“Head3Desc”}，
{名称：“Head4”，描述：“Head4Desc”}
];
$scope.collapseIt=函数（id）{
$scope.collapseId=（$scope.collapseId==id）？-1:id；
}
});
/*将您的css放在这里*/
李{
列表样式：无；
填充物：5px；
颜色：红色；
}
div{
填充：10px；
背景：ddd；
}

AngularJS简单塌陷


{{ret.name}
{{ret.desc}}


html格式

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

你能给普朗克举个例子吗？那我也许能帮你做个指示。以此为基础：为什么你认为这些类型的指令无处不在？有点奇怪。@Sridhar你在说什么指令？不要问这个问题可能对某些人有用。这里有一个教程。这不是“角度”。这是“在jquery中”
<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>

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
}