Angular Bootstrap UI - 仅折叠一个元素

Question

我正在使用 angular bootstrap UI 库：

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

在我的网站上创建一个可折叠的功能。该功能本身正在运行，但它将 expand/collapse 我具有折叠功能的每个元素，而不仅仅是单击的唯一元素。

这是我的代码：

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>

我怎样才能让我点击的唯一元素折叠起来？

Answer 1

目前，两个 isCollapsed 都引用您的 $scope 对象上的相同属性。如果您希望将它们分开，我看到两个选项。

范围内的两个属性

$scope.isCollapsedContent1 = true;
$scope.isCollapsedContent2 = true;

或

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

两个ng模型

如果你不需要知道控制器中的内容是否折叠，你不妨将 isCollapsed 值放入你的 html 并删除你的 $scope 的属性。

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

Answer 2

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

看看正在运行的 Fiddle.

Angular Bootstrap UI - 仅折叠一个元素

Angular Bootstrap UI - Only collapsing one element

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap