How to show only one row in angular datatable?

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>

@AlpeshPrajapati i want to show one row at first, there will be one expand button, on click of it i need to show remaining rows. — user3660375, Oct 19 '16 at 05:39
@user3932103 Working Plnkr code - http://plnkr.co/edit/HHBTE2wiEjI2z9PbEhBC?p=preview let me know if this is what you are looking for — swapnesh, Oct 19 '16 at 05:49
@swapnesh i have four tds in tr, its not working with table row. — user3660375, Oct 19 '16 at 05:54

Parveen Sachdeva · Answer 1 · 2016-10-19T05:45:40.527

2

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'

edited Oct 19 '16 at 05:45

answered Oct 19 '16 at 05:36

Parveen Sachdeva

989
2
19
28

if we want to show remaining elements on any expand button then? – user3660375 Oct 19 '16 at 05:40
@user3932103 I have modified the code for your reference. – Parveen Sachdeva Oct 19 '16 at 05:46

score 1 · Answer 2 · answered Oct 19 '16 at 05:53

1

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/

answered Oct 19 '16 at 05:53

Alpesh Prajapati

1,593
2
18
38

if it is key value pair, limitTo is not wokring, is there any other method? – user3660375 Oct 19 '16 at 06:45
can you show sample code ? m not able to understand – Alpesh Prajapati Oct 19 '16 at 06:53

score 1 · Answer 3 · answered Oct 19 '16 at 07:02

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/

score 0 · Answer 4 · answered Oct 19 '16 at 05:51

// 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"

score 0 · Answer 5 · answered Oct 19 '16 at 09:03

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>

How to show only one row in angular datatable?

5 Answers5