A tiny AngularJS Directive to add view more less functionality to any list
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist sorted uglify issue Apr 5, 2017
src travis config Apr 5, 2017
.babelrc minification Apr 4, 2017
.gitignore minification Apr 4, 2017
.travis.yml update karma config Apr 5, 2017
LICENSE minification Apr 4, 2017
README.md added downloads badge Apr 10, 2017
bower.json change main to non minified Apr 5, 2017
karma.config.js karma single run Apr 5, 2017
package.json updated readme for styling Apr 7, 2017

README.md

view-more-less Build Status Twitter URL npm

A tiny AngularJS Directive to add view more less functionality to any list. No jQuery or external libaries overhead.

Working Demo

Installation

NPM

npm install view-more-less

Bower

bower install angular-view-more-less

Examples

view-more-less directive element should be added as last item in the ul you want to convert into view more / less. For example:

<ul>
    <li>item1<\li>
    <li>item2<\li>
    ...
    <view-more-less limit='1' show-more-text='Show More &#x25BC;' show-less-text='Show Less &#x25B2;' is-static=true></view-more-less>    
<\ul>

The text to be displayed on view more and view less links can be configured by show-more-text and show-less-text attributes.

Static List

For static list is-static attribute should be set to true. list attribute is not required.

<view-more-less limit='3' show-more-text='Show More &#x25BC;' show-less-text='Show Less &#x25B2;' is-static=true></view-more-less>    

Deferred List

For Deferred list is-static attribute is not required. List array should be passed to list attribute.

<view-more-less limit='4' show-more-text='Show More &#x25BC;' show-less-text='Show Less &#x25B2;' list='deferredList'></view-more-less>    

Styling

The default styles for li and btn can be overriden by passing CSS properties as an object to li-style and btn-style attributes respectively.

$scope.btnStyle = {
    'color':'red',
    'font-size':'14px'
};

And in the template,

<view-more-less btn-style='btnStyle'></view-more-less> 

LICENSE

ISC