使用角度js展開和折疊
[英]Expand and collapse with angular js
問題描述
我試圖找出一種使用角度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並且它們都有擴展的東西，單擊展開文本將在兩個區域中展開它們，因為它們不是唯一的。
6 個解決方案
解決方案1
27 2014-01-12 16:04:16
你可以在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>標簽。
解決方案2
16 已采納 2013-01-12 18:00:55
我不知道如何通過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))
...
}
解決方案3
7 2013-12-23 17:17:30
見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
3 2013-11-07 08:49:06
我剛剛使用ng-show，ng-click和ng-init使用Angular編寫了一個簡單的zippy / collapsable。 它實現了一個級別，但可以輕松擴展到多個級別。
將一個布爾變量分配給ng-show，並在單擊標題時切換它。
解決方案5
2 2017-06-17 17:03:38
這里使用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 Link http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview
Github： https ： //github.com/deepakkoirala/SimpleAngularCollapse
解決方案6
-1 2017-12-06 10:57:11
在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
}
表展開和折疊在angular js中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.