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()トグルします。collapsedtbody

そのため、親 tbody が Class('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

ここでは、詳細を表示/非表示にできるように、個々のボディに分離されたスコープが必要なため、より適切なソリューションを提供するには、ディレクティブの作成に取り組む必要がありました。

Angular Directiveを使用すると、次のような多くの利点があります。

  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 に答える