Javascript 使用ui.bootstrap和AngularJS进行多次折叠_Javascript_Jquery_Html_Angularjs_Angular Ui Bootstrap

Javascript 使用ui.bootstrap和AngularJS进行多次折叠

javascript jquery html angularjs

Javascript 使用ui.bootstrap和AngularJS进行多次折叠,javascript,jquery,html,angularjs,angular-ui-bootstrap,Javascript,Jquery,Html,Angularjs,Angular Ui Bootstrap,我正在尝试使ui引导程序崩溃。当我使用静态单折叠或双折叠系统时，其工作正常，但对于我的设计，我使用ng repeat创建折叠，因此我不知道如何使用多重折叠我找到了这段代码，但它只适用于静态代码 var app = angular.module("MyApp", ['ui.bootstrap']); app.controller('mainController', function ($scope) { $scope.trafficCollapsed = false; $scop

我正在尝试使

ui引导程序崩溃

。当我使用静态单折叠或双折叠系统时，其工作正常，但对于我的设计，我使用

ng repeat

创建折叠，因此我不知道如何使用多重折叠

我找到了这段代码，但它只适用于静态代码

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


/▼；
美丽的头衔
美丽的描述
54654&x25BC 试试这个，这个可能对你有帮助。

控制器代码
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);
});

谢谢你的回答，但第一我需要折叠
而不是下拉列表
，第二我需要一次打开一个而不是全部@DevidasKadamyou可以在折叠中添加任何标记，我只是添加了下拉菜单。我将更新fiddle和answer，一次只打开一个。是最新的提琴，你可以从这个例子中得到一个想法，然后开发你自己的。最后，您是一名开发人员。您是否注意到我使用了collapse=“val.ismenuclopsed”
，您可以在ul
中添加任何标记，或者您可以使用具有属性collapse
的div。
  <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>

    .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);
}

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);
});