Question

我正在使用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>

我怎样才能让它成为我点击折叠的独特元素？

Answer 1

目前两个isCollapsed都引用了$ scope对象上的相同属性。如果你想要那些被分开，我会看到两个选择。

范围内的两个属性

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

或

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

两个ng-model

如果您不需要知道控制器中的内容是否已折叠，您可以将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 - 仅折叠一个元素

2 个答案: