0

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

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

4

2 回答 2

2

Forked your 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];
  }
}

and the 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>
于 2013-07-10T18:21:47.647 回答
1

@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。

于 2013-07-23T09:20:15.260 回答