javascript - 表展开和折叠在 angularjs 中不起作用

Question

下面是展开和折叠的表格结构，我已经使用表格完成了。现在我已经使用下面的脚本进行折叠和展开。但有时我成功扩展，有时却失败。

我做了什么，当我收到 api 的响应时，我调用这个函数:

$timeout(function (){
                    $scope.initExpandCollapse();
                },1000);


$scope.initExpandCollapse = function () {
       angular.element(document).on("click", ".table_exp", function(){
             var TBODY = angular.element(this).parents(3);
        if(TBODY.hasClass("open")){
            TBODY.children("tr.expand-table-row").hide();
            TBODY.removeClass("open");
            return false;
        }
        TBODY.addClass("open");
        TBODY.children("tr.expand-table-row").show();
    });
 }

如果你们能帮我解决这个问题。谢谢。

Answer 1

CSS:

tr.expand-table-row {
   display: none;
}

tr.expand-table-row.open {
   display: initial;
}

Angular

$scope.expandCollapse = function expandCollapse (item) {
    item.open = !item.open
 }

HTML

<table>
  <tbody>
    <tr ng-repeat="item in items track by $index"">
      <td ng-click="expandCollapse(item)">++++</td>
      <td>
          <table>
            <tr ng-class="{'open': item.open}" class="expand-table-row open">
              <td>{{item.name}}</td>
              <td ng-repeat="data in item.options">{{data.name}}</td>
            </tr>
          </table>
      </td>  
    </tr>
  </tbody>
</table>

您需要嵌套表格，以便点击标记不会简单地与其余部分一起消失，除了突出点是 ng-class="{'open': item.open}" 表达式如果设置了 item 上的属性 open，则设置类 open。