1

我的桌子看起来像这样，有多个 tbody：

  <tbody>
    <tr class='group-header' ng-click="collapseDetail($event)"> ... </tr>
    <tr class='detail' ng-hide="groupIsCollapsed()">...</tr>            
    <tr class='group-footer'> ... </tr>
  </tbody>

  <tbody>
    <tr class='group-header' ng-click="collapseDetail($event)"> ... </tr>
    <tr class='detail' ng-hide="groupIsCollapsed($event)">...</tr>            
    <tr class='group-footer'> ... </tr>
 </tbody>

在我的collapseDetail()函数中，我collapsed在tbody.

因此，我希望仅在父 tbody hasClass('collapsed`) 时才隐藏详细信息行。

那合法吗？我所拥有的不起作用：

$scope.collapseDetail = function (e) {
   var targ = angular.element( e.currentTarget );

   $scope.$apply( function(targ){
      targ.parent().toggleClass('collapsed');
   });
}

$scope.groupIsCollapsed = function (e) {
  if (e == undefined) return false;
     var targ = angular.element( e.currentTarget );
       return targ.parent().hasClass('collapsed');
}
4

1 回答 1

0

为了提供更简洁的解决方案，必须为您创建一个指令，因为在这里您需要在单个 tbody 上设置一个独立的范围，以便他们可以显示/隐藏细节。

使用Angular 指令有很多优点，比如

  1. 具有孤立的范围（如上所述）
  2. 减少 html 标记
  3. 控制器中没有 DOM 操作（严格不考虑角度透视，所有 DOM 操作仅在指令中完成，使其更易于维护）

HTML 代码：

<table>
    <tbody rendered key="assasa" val="tgtrtghrt"></tbody>
    <tbody rendered key="fsfgsd" val="teeger"></tbody>
</table>

此问题的控制器代码：

angular.module('t', [])
//You can see that nothing is in the controller now
.controller('test', function ($scope) {});

指令代码：

.directive('rendered', function ($compile) {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            key: '@',
            val: '@'
        },
        link: function (scope, element, attrs) {
            var ele = "<tr ng-init='collapseTbody = false;' class='group-header' ng-click='collapseTbody=!collapseTbody'><td>{{key}}</td></tr><tr class='detail' ng-hide='collapseTbody'><td>{{val}}</td></tr>";
            scope.$watch('key', function () {
                element.html(ele);
                $compile(element.contents())(scope);
            });
        },
    }
});

工作小提琴

更多关于Angular 指令

于 2014-09-19T21:18:01.127 回答