ui.bootstrap.collapse - 两个折叠 - 一次只能打开一个

Question

我正在使用 ui.bootstrap 的折叠按钮，并且在 table 行中有两个折叠按钮，我希望一个折叠按钮在另一个打开之前关闭。

目前，第二个坍塌会额外打开，以便两者都打开并堆叠在一起。

我搜索并找到了使用 bootstrap 和 jquery (http://jsfiddle.net/RfsS9/5/) 解决此问题的方法，但我想坚持使用 angularjs。

有人知道如何用 angular 方法解决这个问题吗？

这是我的（简化）代码：

<table class="table table-bordered">
 <thead>
  <tr>
   ...
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>/<span class="pull-right" ng-click="urlCollapsed = !urlCollapsed">&#x25BC;</span></td>
     ...
    <td>54,654<span class="pull-right" ng-click="trafficCollapsed = !trafficCollapsed">&#x25BC;</span></td>
   </tr>

 <!-- UrlDetails -->
   <tr collapse="!urlCollapsed">
     <td colspan="4" style="background-color: pink"></td>
   </tr>

 <!-- trafficDetails -->
   <tr collapse="!trafficCollapsed">
    <td colspan="4" style="background-color: blue"></td>
   </tr>

  </tbody>
 </table>

以及作为 plunker 的完整代码： http://plnkr.co/edit/T5iUXTL130p93tzNiera?p=preview

Answer 1

您应该做的是在展开流量面板时将 urlCollapsed 设置为 false 并在展开 url 时将 trafficCollapsed 设置为 false面板。

更简洁的方法是为每个状态设置一个切换功能，如下所示。

JS

var app = angular.module("MyApp", ['ui.bootstrap']);

app.controller('mainController', function ($scope) {
  $scope.trafficCollapsed = false;
  $scope.urlCollapsed = false;

  $scope.toggleUrl = function () {
    $scope.urlCollapsed = false;
    $scope.trafficCollapsed = !$scope.trafficCollapsed
  };

  $scope.toggleTraffic = function () {
    $scope.trafficCollapsed = false;
    $scope.urlCollapsed = !$scope.urlCollapsed;    
  };
});

HTML

<tr>
  <td>/<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td>
  <td>A beautiful title</td>
  <td>A beautiful description</td>
  <td>54,654<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span></td>
</tr>

ui.bootstrap.collapse - 两个折叠 - 一次只能打开一个

ui.bootstrap.collapse - two collapse - only one should open at a time

angularjs

angular-ui-bootstrap