I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected.
This is not originally my plunker; I used it for reference on grouping and I am trying to implement the stated functionality within the same. The default behavior should show area1 while collapsing area2. Only upon clicking area 2, should area1 collapse.
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope, $timeout, NgTableParams) {
$scope.data = [{
uid: 'User 11',
name: 'Name 11',
area: 'Area 1'
},
{
uid: 'User 12',
name: 'Name 12',
area: 'Area 1'
},
{
uid: 'User 21',
name: 'Name 21',
area: 'Area 2'
},
{
uid: 'User 22',
name: 'Name 22',
area: 'Area 2'
}
];
$scope.tableParams = new NgTableParams({
group: "area"
}, {
dataset: $scope.data
});
});<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c3730373122336e20303003706d706d75">[email protected]</a>" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1808f86948d8093cf8b92a1d0cfd5cfd9">[email protected]</a>" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc929bd1889d9e9099bcced2ccd2ce">[email protected]</a>/bundles/ng-table.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8089c39a8f8c828baedcc0dec0dc">[email protected]</a>/bundles/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myCtl" ng-app="app">
<table ng-table="tableParams" class="table table-bordered table-hover" show-group="false">
<colgroup>
<col width="50%" />
<col width="30%" />
</colgroup>
<tr class="ng-table-group" ng-repeat-start="group in $groups">
<td colspan="2">
<a href="">
{{ group.value }}
</a>
</td>
</tr>
<tr ng-repeat="u in group.data" ng-repeat-end>
<td title="'User ID'">{{ u.uid }}</td>
<td title="'Name'">{{ u.name }}</td>
<td title="'Area'">{{ u.area }}</td>
</tr>
</table>
</div>
</body>
</html>http://plnkr.co/edit/M8BcStInfSaSEaq6UVN7?p=previewplunker example