Question

我正在使用来自JSON API的动态数据的表中使用ui-bootstrap.collapse。多列中的两列包含每行的折叠部分。

当我点击其中一个图标来切换特定部分时，整个列的每个部分都会打开。

当我试图再次关闭部分时，同样的问题 - 任何图标都起作用（不仅仅是那个特定的部分）。

我怀疑我必须为每个部分添加一个唯一的ID或类似内容，以便只弹出一个特定的部分。但是我无法让这个工作。

任何人都可以指出我正确的方向吗？

以下是我的一些代码（我用静态数据替换了动态数据，使其更简单：

...
<tbody ng-repeat="url in urls">
    <tr>
      <td>{{url.url}}<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td>
      <td>{{url.title}}</td>
      <td>{{url.traffic}}<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span></td>
    </tr>

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

以及包含整个代码的工作人员：http://plnkr.co/edit/e4UldAFjjIr26Il73C88?p=preview

Answer 1

您需要将url或一些唯一字段传递给toggleUrl（）方法，然后在方法中为每个roe部分生成特定变量nd使它们为true。因此，你必须在ng-show上相应地对每个鞋子进行特定的部分制作。像这样的东西

$scope.toggleUrl = function (url) {
  if (url === '/1') {           
    $scope.url1Collapsed = !$scope.url1Collapsed;
  } else {
    $scope.urlCollapsed = !$scope.urlCollapsed;
  }
};

并在页面上

<tr collapse="!url1Collapsed">
    <td colspan="4" style="background-color: pink">partial 1</td>
</tr>
<tr collapse="!urlCollapsed">
    <td colspan="4" style="background-color: pink"> partial 0</td>
</tr>

ui.bootstrap.collapse - 表列中每行的一次折叠 - 仅打开已单击的折叠（不是全部）

1 个答案: