Hi,
I will write today about a cool functions to make read more and read less system for your large description in AngularJS. I have observed that it require many coding to make read more function in php, or other language that provide backend query in database to show additional text in read more. But it is very easy now to handle in front end MVC. I am talking about AngularJS. You can handle this in AngularJS very smothly.
<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app="myApp" ng-controller="myCtrl"><p ng-if="!isShowOpen">{{description.substring(0,45) + (description.length > 45 ? '...' : '')}}</p><p data-ng-show="isShowOpen">{{description}}</p><div data-ng-click="isShowOpen = !isShowOpen" ng-show="!isShowOpen && description.length>45" style="cursor:pointer;">Show more</div><div data-ng-click="isShowOpen = !isShowOpen" ng-show="isShowOpen" style="cursor:pointer;">Show less</div></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.description= "Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar Loriem epsum dollar"});</script>
</body></html>
If you have any question you can comment and subscribe for more update on my regular post.
No comments:
Post a Comment