I am new to Angularjs and i want to show top 5 and bottom 5 rows in between click all functionality which shows all the records. I tried different things but not able to get success.
<div class="col-md-12">
<div class="dataTables_wrapper" id="comparison-table">
<table class="datatable">
<thead>
<tr>
<th width="5%">A</th>
<th width="10%">B</th>
<th width="25%" class="text-left">C</th>
<th width="15%">D</th>
<th width="15%">E</th>
<th width="15%">F</th>
<th width="15%">G</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>##</td>
<td class="text-left">AA</td>
<td>12</td>
<td>12</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>##</td>
<td class="text-left">BB</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>##</td>
<td class="text-left">CC</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>##</td>
<td class="text-left">DD</td>
<td>11.7</td>
<td>10.7</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>##</td>
<td class="text-left">EE</td>
<td>12</td>
<td>10.4</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td class="text-center br" colspan="7"> <a href="#">Click to view all</a></td>
</tr>
<tr>
<td>32</td>
<td>##</td>
<td class="text-left">FF</td>
<td>12</td>
<td>12</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>33</td>
<td>##</td>
<td class="text-left">GG</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>34</td>
<td>##</td>
<td class="text-left">HH</td>
<td>12</td>
<td>11.7</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>35</td>
<td>##</td>
<td class="text-left">II</td>
<td>11.7</td>
<td>10.7</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td>36</td>
<td>##</td>
<td class="text-left">JJ</td>
<td>12</td>
<td>10.4</td>
<td>3</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
please find the fiddle just for demo purpose - http://jsfiddle.net/samirshah1187/Br28J/
Assuming I have understood your question correctly, you want the first and last five rows to always be visible, with the option to toggle the rows inbetween? If so, try this:
Controller:
function MyCtrl($scope) {
// Create Test Array
$scope.myArray = Array.apply(null, {length: 20}).map(Number.call, Number)
$scope.hideRows = true
$scope.toggleHiddenRows = function() {
$scope.hideRows = !$scope.hideRows
}
}
View:
<body ng-controller="MyCtrl">
<table>
<tr ng-repeat="value in myArray" ng-hide="hideRows && $index > 4 && $index < (myArray.length - 5)">
<td>Row: {{value}}</td>
</tr>
</table>
<button ng-click="toggleHiddenRows()">Toggle Hidden Rows</button>
</body>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments