Angular Bootstrap UI——只折叠一个元素

Angular Bootstrap UI - Only collapsing one element

本文关键字：一个 元素 折叠 Bootstrap UI Angular      更新时间：2023-09-26

我使用的是angular bootstrap UI库:

https://angular-ui.github.io/bootstrap/

在我的网站上创建一个可折叠的功能。功能本身是工作的，但它会展开/折叠我有折叠功能的每个元素，而不仅仅是唯一的元素被点击。

下面是我的代码: 

var app = angular.module('someApp', ['ui.bootstrap']);
app.controller('collapseController', ['$scope', function ($scope) {
  
   $scope.isCollapsed = true;
};
.passInfoDropdown {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  font-weight: bold;
}
.dividerLine {
  background-color: #DED7CF;
  height: 2px;
}
.passInfoTableCellLeft {
  width: 220px;
}
<div class="dividerLine"></div>
<div class="click" ng-click="isCollapsed = !isCollapsed">
  <table>
    <tr>
      <td class="passInfoTableCellLeft"><div class="passInfoDropdown inline">TSA Information (optional)</div></td>
      <td><i class="fa fa-chevron-down inline"></i></td>
    </tr>
  </table>
  <div collapse="isCollapsed">
    <div class="well well-lg">Some content</div>
  </div>
</div>
<div class="dividerLine"></div>
<div class="click" ng-click="isCollapsed = !isCollapsed">
  <table>
    <tr>
      <td class="passInfoTableCellLeft"><div class="passInfoDropdown inline">Loyalty Programs (optional)</div></td>
      <td><i class="fa fa-chevron-down inline"></i></td>
    </tr>
  </table>
  <div collapse="isCollapsed">
    <div class="well well-lg">Some content</div>
  </div>
</div>

我如何使它只有唯一的元素，我点击崩溃?

目前，两个iscollapse都指向$scope对象上的相同属性。如果你想把它们分开，我看到两个选项。

  1. 作用域

    中的两个属性
    $scope.isCollapsedContent1 = true;
$scope.isCollapsedContent2 = true;

    或

    $scope.isCollapsed = {};
$scope.isCollapsed['content1'] = true;
$scope.isCollapsed['content2'] = true;

  2. 两个ng模型

如果你不需要知道控制器中的内容是否折叠了，你可以把iscollapse的值放到html中，并删除$scope的属性。

    <div class="click" ng-click="isCollapsedContent1 = !isCollapsedContent1" ng-model="isCollapsedContent1" ng-init="isCollapsedContent1=true">

布兰登,你好。它看起来(在完整的代码片段中)也像您遗漏了这些....
<html ng-app="ui.bootstrap.demo">
和
<div ng-controller="CollapseDemoCtrl">

看一下工作提琴

相关文章：