javascript - 使用 ui.bootstrap 和 AngularJS 进行多重折叠

标签 javascript jquery html angularjs angular-ui-bootstrap

我正在尝试让 ui bootstrap 崩溃。当我使用静态单或双折叠系统时,它工作正常,但对于我的设计,我使用 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

<tr>
    <td>/<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td>
    <td>A beautiful title</td>
    <td>A beautiful description</td>
    <td>54,654<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span
    </td>
</tr>

我希望这个设计是折叠的。

enter image description here

最佳答案

试试这个,这可能对你有帮助。 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>

风格

    .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 代码

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

关于javascript - 使用 ui.bootstrap 和 AngularJS 进行多重折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39205719/

相关文章:

jquery - 在窗口调整大小时将元素保持在同一位置

javascript - JavaScript 中的类型化数组不是数组

javascript - iframe 中框架的 jQuery/javascript 上下文是什么?

恢复时的 jQuery ui.draggable 事件/状态

javascript - 网站需要自动调整页面上每个元素的大小,例如图像和字体

javascript - jQuery datepicker- 具有 3 个字段的范围?

javascript - 单击提交按钮后重定向 [HTML]

Javascript - 返回假错误

javascript - Mathjax - 当有顶部固定菜单时,为方程的目标 "\eqref"链接添加偏移量

javascript - 将 JavaScript 事件添加到 HTML 输入