How to show only one row in angular datatable? - angularjs

Question

I am new to angularjs, i have 25 rows to show, but for first time loading i am trying to show only one row, there will be one expand button to show remaining rows, then on click of expand i want to show all the rows.
Here is the code.
<table>
<tbody>
<tr ng-repeat="x in names">
<td>{{x}}</td>
</tr>
</tbody>
</table>

Answer 1

You can use:
<div ng-repeat="x in names | limitTo: limit">
<p>{{x}}</p>
</div>
$scope.limit = 1;
and on ng-click you can set your limit like: ng-click='limit = names.length'

Answer 2

This is what you can try.
<div ng-init="limit= 1">
<button ng-click="limit=names.length">View</button>
<table>
<tbody>
<tr ng-repeat="x in names | limitTo: limit">
<td>{{x}}</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/alpeshprajapati/7MhLd/2252/

Answer 3

Try limitTo filter :
The limitTo filter returns an array or a string containing only a specified number of elements.
Syntax :
{{ object | limitTo : limit }}
As per the requirement :
Js :
var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
$scope.elements = ["1", "2", "3", "4", "5"];
$scope.limit = 1;
});
Html :
<button ng-click="limit=elements.length">Expand More</button>
<table>
<tr ng-repeat="item in elements | limitTo: limit">
<td>{{item}}</td>
</tr>
</table>
Working fiddle : https://jsfiddle.net/rohitjindal/vcxvvecr/2/

Answer 4

// Angular `slice` filter for arrays
var app = angular.module('myApp', []);
app.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
app.controller('MainController', function($scope) {
$scope.offset = 1;
$scope.items = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0;">
<ul>
<li ng-repeat="item in items | slice:start:offset">{{item}}</li>
</ul>
<button ng-click="offset = items.length">Expand</button>
</div>
</div>
I use slice for limit set
You can also try with:
limitTo: (limit) : (begin)
you can say ng-repeat="item in list | limitTo:50:0"

Answer 5

Limit the rows by set a scope variable in the controller and filter it in the ng-repeat.
Script:
var app = angular.module('myApp', []);
app.controller('limitCtrl',function($scope) {
$scope.limitNumber = 1;
});
Html:
<table>
<tbody>
<tr ng-repeat="x in names | limitTo: limitNumber">
<td>{{x}}</td>
</tr>
</tbody>
</table>