为Angular JS中正在折叠的Bootstrap DIV设置一个默认的打开状态

Set a default open state for an Angular JS collapsing Bootstrap DIV?

本文关键字：一个 默认 状态 DIV JS Angular Bootstrap 折叠 设置      更新时间：2023-09-26

我有一个Bootstrap折叠div，我已经适应了Angular JS:

<fieldset>
  <legend data-toggle="collapse" data-target="#radios" class="data-toggle" collapse>Radio Buttons</legend>
    <div id="radios" class="panel-collapse collapse">
    <!-- add class "collapse" to start out closed -->
    <div class="panel-body">
        ...stuff...
    </div>
  </div>
</fieldset>

您在面板上设置collapse类以使其开始时关闭(如此处)或省略它以使其开始时打开。

我已经写了这个指令来切换被点击项目的类，以显示一个"打开"或"关闭"图标:

'use strict';
angular.module('designSystemApp')
  .directive('collapse', function() {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            element.on({
                click: function(e) {
                    element.toggleClass('open');
                }
            });
        }
    }
});

它像这样工作得很好，当它开始关闭并切换打开和关闭。

因为BS的方法是在子对象(面板)上设置类，我不确定如何影响Angular触发器对象，所以改变该类将在开始时设置状态/类为"打开"。

换句话说，如果我删除类，div开始打开，但 legend没有打开类，所以图标是"关闭"。我尽量避免设置两个东西;寻找一种简单的方法来设置默认为打开或关闭

虽然没有直接回答，但为您提供了一个可能的解决方案/解决方案，我正在使用angular-bootstrap库进行类似的任务。这个库可以在这里找到

一个适合你用例的折叠插件的例子:

<fieldset>
  <legend ng-click="isCollapsed = !isCollapsed">Radio Buttons</legend>
  <div id="radios" class="panel-collapse" collapse="isCollapsed">
    <div class="panel-body">
        ...stuff...
    </div>
  </div>
</fieldset>

然后在你的angular指令或控制器中，你可以设置isCollapsed = true or false，这取决于你是想让它默认打开还是关闭。

相关文章：