Show/Hide Table Row

Ability to click on a table row and show more details relating to the item.

by Rob Rothe

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-app="tableApp" ng-controller="TableCtrl">
    <table class="table table-striped">
        <tbody ng-repeat="actor in actors">
            <tr ng-click="more(actor)">
                <td class="col-xs-2">{{actor.name}}</td>
                <td class="col-xs-2">{{actor.email}}</td>
            </tr>
            <tr ng-show="actor.more">
                <td colspan="2">
                    <p>{{actor.other}}</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var app = angular.module('tableApp', []);

app.controller('TableCtrl', function ($scope) {
    $scope.actors = [{
        name: 'Harrison Ford',
        email: '[email protected]',
        other: 'I have a whip',
        more: false
    }, {
        name: 'PeeWee',
        email: '[email protected]',
        other: 'Theres no basement in the Alamo',
        more: true
    }];

    $scope.more = function (actor) {
        if (!actor.more) {
            actor.more = true;
        } else {
            actor.more = false;
        }
    };
});

app.directive('showmore', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.on('click', function () {
                element.parents('tr').next('tr').toggle();
            });
        }
    }
});