CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Jackson
Jackson

Reputation: 6841

Hide Bootstrap Table Rows in AngularJS (1.6)

I have a long table and I'd like to show only the first three entries by default. I'd like to provide something like the table entitled "Additional Metadata" shown on this page with a 'see more' option. The 'see more' link, once clicked, will show the rest of the rows in the table, and an option will appear at the bottom of the table now that says "see less".

I tried playing around with ng-show/ng-hide but couldn't accomplish the aspect where the "see more" link would show at the bottom of the table once all rows are shown. Any help would be appreciated.

Upvotes: 0

Views: 43

Answers (2)

svarog
svarog

Reputation: 9839

Just use the limitTo filter to show n amount of first entries, when n can a scope variable (this is much the same way pagination is usually done in angular)

$filter('limitTo')(input, limit, begin)

You'll set limit to 3, and begin from 0

Inside your ngRepeat

ng-repeat="row in data | limitTo: showAmount : 0"

And inside your controller

$scope.showAmount = 3;

Upvotes: 0

Codendaal
Codendaal

Reputation: 534

Assuming you are using "ng-repeat" to populate the table, you should select an additional "index" or "row no" field and then use a "filter" to filter where the index is less than 4. clicking "see more" can then just change the filter.

Upvotes: 1

Related Questions