Question

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

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

Answer 1

分叉你的傻瓜

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>

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

始终使用AngularUI折叠打开一个部分

2 个答案: