can ng-hide invoke a function in Angular

Question

My table looks like this, with more than one 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>

In my collapseDetail() function I toggle a class collapsed on the tbody.

And so I would like to have the detail row hidden only if the parent tbody hasClass('collapsed`).

Is that legal? What I have isn't working:

$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');
}

score 0 · Accepted Answer · answered Sep 19 '14 at 21:18

To give a neater solution had to work on creating a directive for you, as over here you require an isolated scope on individual tbody, so that they can show/hide the detail.

Using Angular Directive has many advantages like

having isolated scope (as mentioned above)

Reducing html markup

NO DOM manipulation in controller ( a strict no taking angular perspective into account, all DOM manipulations to be done only in directive making it more maintainable)

HTML Code:

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

Controller Code for this question:

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

Directive Code:

.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);
            });
        },
    }
});

Working Fiddle

can ng-hide invoke a function in Angular

1 Answers1