Всегда держите один раздел открытым с помощью AngularUI Collapse

Кто-нибудь знает, как изменить Angular UI, чтобы держать открытым только один раздел, как jQuery Accordion?

Вот код Плункера: http://plnkr.co/edit/zv8D1QdDs55iJ47UJhtM?p=preview

Источник

2 ответа

Решение

Раздвоенный твой планкр

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>
Источник

Хороший ответ от @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.

Источник
Другие вопросы по тегам