Angular.js double row expand

Iteration over two rows summary / details (toggleable)

by Randy Crews

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css">
<div ng-controller="AppCtrl">
    <table>
        <tbody ng-repeat="item in items">
            <tr class="main-row" ng-click="toggleDetail($index)">
                <td>Summary {{item}}</td>
            </tr>
            <tr class="extra-row" ng-show="activePosition == $index"><td>Details {{item}} here...</td></tr>
        </tbody>
    </table>    
</div>

CSS

table {
    width: 100%
}

.main-row {
    cursor: pointer;
}

.main-row:hover {
    background-color: #ddd;
}

.extra-row {
    background-color: #aea !important;
}

JavaScript

app = angular.module("App", []);

app.controller("AppCtrl", function($scope) {
    $scope.items = [1,2,3,4,5,6,7];
    $scope.toggleDetail = function($index) {
        //$scope.isVisible = $scope.isVisible == 0 ? true : false;
        $scope.activePosition = $scope.activePosition == $index ? -1 : $index;
    };
});