ui.bootstrap.collapse - 兩個崩潰 - 只有一個應該打開

Question

我使用的是ui.bootstrap的摺疊，並且在表格行中有兩個摺疊按鈕，我想在另一個打開之前關閉一個摺疊。

當前第二次崩潰打開另外打開，以便兩者都打開並堆疊在彼此的頂部。

我搜索並找到一種方法來解決這個使用bootstrap和jquery（http://jsfiddle.net/RfsS9/5/），但我想堅持angularjs。

有沒有人知道如何解決這個角度的方式？

這是我（簡化）代碼：

<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當您展開交通面板和設置當您展開網址面板時，您可以使用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>