使用 AngularUI 始终保持一个部分打开答案

【问题标题】：Always Keep One Section Open Using AngularUI Collapse使用 AngularUI 始终保持一个部分打开
【发布时间】：2013-07-10 17:55:09
【问题描述】：

有谁知道如何修改 Angular UI 以像 jQuery Accordion 一样只保持一个部分打开？

这是 Plunker 代码：http://plnkr.co/edit/zv8D1QdDs55iJ47UJhtM?p=preview

【问题讨论】：

有一个由 Angular UI 人员开发的引导 ui 项目，它有一个手风琴指令：github.com/angular-ui/bootstrap

标签： twitter-bootstrap angularjs angular-ui

【解决方案1】：

分叉你的 plunkr

http://plnkr.co/edit/Cih5IeIe1m3ATBOPI61j?p=preview

angular.module('plunker', ['ui.bootstrap']);
function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = [true, true, true];

  $scope.openThis = function(e)
  {
    for(var i=0;i<$scope.isCollapsed.length;i++)
      $scope.isCollapsed[i]=true;
    $scope.isCollapsed[e] = !$scope.isCollapsed[e];
  }
}

和 HTML

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CollapseDemoCtrl">
    <button class="btn" ng-click="openThis(0)">Toggle collapse</button>
    <div collapse="isCollapsed[0]">
        <div class="well well-large">First content</div> 
    </div>

  <br/>

  <button class="btn" ng-click="openThis(1)">Toggle collapse</button>
  <div collapse="isCollapsed[1]">
        <div class="well well-large">Second content</div> 
    </div>

  <br/>

  <button class="btn"  ng-click="openThis(2)">Toggle collapse</button>
  <div collapse="isCollapsed[2]">
    <div class="well well-large">Third content</div> 
    </div>
</div>
  </body>
</html>

【讨论】：

【解决方案2】：

@shaunhusain 的回答很好。我已经做了一个类似的解决方案，但允许您一起扩展或一次仅扩展一个。这当然需要更多的动手能力，这意味着您必须使用 if 语句在函数中定义要折叠和展开的内容......就像这样：

$scope.chartTableActive = "btnBoth";
$scope.chartCollapsed = false;
$scope.tableCollapsed = false;

$scope.chartTableToggleFunction = function () {
    if ($scope.chartTableActive == "btnBoth") {
        $scope.chartCollapsed = false;
        $scope.tableCollapsed = false;
    } else if ($scope.chartTableActive == "btnChart") {
        $scope.chartCollapsed = false;
        $scope.tableCollapsed = true;
    } else if ($scope.chartTableActive == "btnTable") {
        $scope.chartCollapsed = true;
        $scope.tableCollapsed = false;
    }
}

这是我的JSFiddle。

【讨论】：

这看起来很棒的人。稍后当我尝试改进我的网站时，我可能需要参考其中的一些内容。