Javascript 使用 angular js 展开和折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12603425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand and collapse with angular js
提问by yaegerbomb
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.
我试图找出一种使用 angular js 进行展开和折叠的方法。如果不操纵控制器中的 dom 对象（这不是角度方式），我一直无法找到一种优雅的方法来做到这一点。目前我有一个很好的方法来实现一层展开和折叠。但是，当我开始嵌套时，事情变得复杂并且无法按照我想要的方式工作（在不应该扩展和折叠多个区域时）。问题是我不知道如何通过 ng-click 发送唯一标识符以仅展开/折叠正确的内容。我应该提到这些项目在 ng-repeat 中，因此我可以自定义发送的参数。
I was able to use this jsfiddleto 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.
我能够使用这个jsfiddle来帮助我让一层展开和折叠工作。然而，这是一种切换方式，我希望用户能够在扩展其他内容的同时保持扩展。所以我所做的解决这个问题是使用一个数组，每次点击某物时，该点击项目的索引将被添加到数组中并扩展该类。当用户再次单击时，索引从数组中删除并且该区域被折叠。
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.
我发现你可以做到的另一种方法是使用指令。但我真的找不到任何例子来解释指令是如何工作的。我什至不知道如何开始编写指令。
My current set up is this:
我目前的设置是这样的：
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>
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.
此设置的问题在于，如果我必须将父 div 展开并且它们下面都有要展开的内容，则单击展开文本将在两个区域中展开它们，因为它们不是唯一的。
采纳答案by Mark Rajcok
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 发送唯一标识符以仅展开/折叠正确的内容。
You can pass $eventwith ng-click (ng-dblclick, and ng- mouse events), then you can determine which element caused the event:
您可以通过$eventng-click（ng-dblclick 和 ng-mouse 事件），然后您可以确定哪个元素导致了该事件：
<a ng-click="doSomething($event)">do something</a>
Controller:
控制器：
$scope.doSomething = function(ev) {
var element = ev.srcElement ? ev.srcElement : ev.target;
console.log(element, angular.element(element))
...
}
回答by Peter Kriens
You can solve this fully in the html:
您可以在 html 中完全解决这个问题：
<div>
<input ng-model=collapse type=checkbox>Title
<div ng-show=collapse>
Only shown when checkbox is clicked
</div>
</div>
This also works well with ng-repeat since it will create a local scope for each member.
这也适用于 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>
Be aware that even though a repeat has its own scope, initially it will inherit the value from collapse from super scopes. This allows you to set the initial value in one place but it can be surprising.
请注意，即使重复具有自己的作用域，最初它也会从超级作用域的折叠中继承值。这允许您在一个地方设置初始值，但这可能会令人惊讶。
You can of course restyle the checkbox. See http://jsfiddle.net/azD5m/5/
您当然可以重新设置复选框的样式。见http://jsfiddle.net/azD5m/5/
Updated fiddle:http://jsfiddle.net/azD5m/374/Original fiddle used closing </input>tags to add the HTML text label instead of using <label>tags.
更新小提琴：http : //jsfiddle.net/azD5m/374/原始小提琴使用结束</input>标签来添加 HTML 文本标签而不是使用<label>标签。
回答by Crystal Gardner
See http://angular-ui.github.io/bootstrap/#/collapse
见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>
回答by Allzhere
I just wrote a simple zippy/collapsable using Angular using ng-show, ng-click and ng-init. Its implemented to one level but can be expanded to multiple levels easily.
我刚刚使用 Angular 使用 ng-show、ng-click 和 ng-init 编写了一个简单的 zippy/collapsable。它实施到一个级别，但可以轻松扩展到多个级别。
Assign a boolean variable to ng-show and toggle it on click of header.
为 ng-show 分配一个布尔变量并在单击标题时切换它。
Check it out here
检查出来这里
回答by ideeps
Here a simple and easy solution on Angular JS using ng-repeat that might help.
这是一个使用 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="[email protected]" 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>This should fulfill your requirements. Here is a working code.
这应该满足您的要求。这是一个工作代码。
Plunkr Link http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview
Plunkr 链接 http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview
Github: https://github.com/deepakktheitroadala/SimpleAngularCollapse
Github：https: //github.com/deepakktheitroadala/SimpleAngularCollapse
回答by shahzain ali
In html
在 html 中
button ng-click="myMethod()">Videos</button>
In angular
有角度的
$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
}
