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>

ui.bootstrap.collapse - 两次崩溃 - 一次只能打开一次

1 个答案: