[英]Make multiple collapse using ui.bootstrap and AngularJS
I'm trying to make ui bootstrap collapse
.我正在尝试使
ui bootstrap collapse
。 When I'm using static single or double collapse system, its working fine, but for my design I'm using ng-repeat
to create collapse, so I have no idea how to use multiple collapse,当我使用静态单或双折叠系统时,它工作正常,但对于我的设计,我使用
ng-repeat
创建折叠,所以我不知道如何使用多次折叠,
I found this code, but it will only work for static code,我找到了这段代码,但它只适用于静态代码,
var app = angular.module("MyApp", ['ui.bootstrap']);
app.controller('mainController', function ($scope) {
$scope.trafficCollapsed = false;
$scope.urlCollapsed = false;
$scope.toggleUrl = function () {
$scope.urlCollapsed = false;
$scope.trafficCollapsed = !$scope.trafficCollapsed
};
$scope.toggleTraffic = function () {
$scope.trafficCollapsed = false;
$scope.urlCollapsed = !$scope.urlCollapsed;
};
});
HTML HTML
<tr>
<td>/<span class="pull-right" ng-click="toggleUrl()">▼</span></td>
<td>A beautiful title</td>
<td>A beautiful description</td>
<td>54,654<span class="pull-right" ng-click="toggleTraffic()">▼</span
</td>
</tr>
I want this design to be collapse.我希望这个设计崩溃。
try this, this may help you.试试这个,这可能对你有帮助。 here is working fiddle
这是工作小提琴
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<ul class="nav">
<li ng-repeat="(key,val) in menuArray">
<button class="btn" ng-click="val.isMenuCollapsed = !val.isMenuCollapsed">{{val.button}}
<span class="caret"></span></button>
<ul class="dropdown-links" collapse="val.isMenuCollapsed">
<li ng-repeat="link in val.links" role="menuitem">
<a href="#">{{link.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
Style风格
.nav>li {
display: inline !important;
position:relative;
}
.dropdown-links{
position: absolute;
left: 0;
z-index: 1000;
float: left;
min-width: 100%;
padding: 5px;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
Controller code控制器代码
var my_app = angular.module('my_app', ['ui.bootstrap']);
my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.menuArray = [
{'button':'Button1','isMenuCollapsed':true,'links':[{'title':'link1-1'},{'title':'link1-2'}]},
{'button':'Button2','isMenuCollapsed':true,'links':[{'title':'link2-1'},{'title':'link2-2'}]}
];
console.log($scope.menuArray);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.