Show more functionality in AngularJS?

Question

I have a list of items along with their information. The problem is that I want to show the description up to 50 characters. If this value is exceeded I want to show a show more button. When that is clicked, I want to show the full text. I want to do it with filters but I don't know how to achieve this.

{{jobs.description | limitTo: 2}}{{jobs.description.length>20 ? '...':''}}

Is there a possibility I can write <a href="">show more</a> link at the location of the characters ...?

Or is there another method of achieving my goal?

Thanks for correcting me.I updated my answer snippet. can you please check now. — Debug Diva, Apr 10 '17 at 06:56

score 6 · Accepted Answer · edited Jul 01 '17 at 10:54

Observation:

Your implementation is correct. The issue is with your AngularJS version.
The AngularJS limitTo filter is available for both Array and Strings from v1.2.1 onwards.

Working Demo

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {

    // Initial 50 characters will be displayed.
    $scope.strLimit = 50;

    // String
    $scope.jobs = {
      description: "Hi I have a list of items along with their information. The problem is I want to show the description up to 50 letters, but if it exceeds this value I want to show show more button upon clicking it I want to show the full text. I want to do it with filters, but I don't know one could achieve this with my way."
    };

  // Event trigger on click of the Show more button.
   $scope.showMore = function() {
     $scope.strLimit = $scope.jobs.description.length;
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{ jobs.description | limitTo:strLimit }}
  <span ng-if="jobs.description.length > 50">
    <button ng-click="showMore()">Show more</button>
  </span>
</div>

Updated Plnkr as per the comment with show less functionality.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {

    // Initial 50 characters will be displayed.
    $scope.strLimit = 50;

    // String
    $scope.jobs = {
      description: "Hi. I have a list of items along with their information. The problem is I want to show the description up to 50 letters, but if it exceeds this value I want to show show more button upon clicking it I want to show the full text. I want to do it with filters, but I don't know one could achieve this with my way."
    };

  // Event trigger on click of the Show more button.
   $scope.showMore = function() {
     $scope.strLimit = $scope.jobs.description.length;
   };

  // Event trigger on click on the Show less button.
   $scope.showLess = function() {
     $scope.strLimit = 50;
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{ jobs.description | limitTo:strLimit }}
  <span ng-if="jobs.description.length > 50 && jobs.description.length != strLimit">
    <button ng-click="showMore()">Show more</button>
  </span>
  <span ng-if="jobs.description.length == strLimit">
    <button ng-click="showLess()">Show less</button>
  </span>
</div>

Is everybody seeing these script errors in the snippet console or its just me ? — Jones Joseph, Apr 10 '17 at 07:38
in your question you write about `show more` only .hence, `show less` functionality was not implemented. If you want i can write `show less` functionality as well. — Debug Diva, Apr 10 '17 at 18:22
@UsmanIqbal I update the answer as per the `Show less` functionality requirement. — Debug Diva, Apr 10 '17 at 18:34
@rohit although i have implemented my way and it worked but still i will mark your answer correct. Cheers — Usman Iqbal, Apr 11 '17 at 06:05
Let's say if I default everything to show less. Is there a way to make the first instance in the list to show more? — Rod, Apr 28 '18 at 19:05
just wanted to add here please change the show less function to his it will handle the case in which a string which is coming has only 50 chars, it will show the show less button, but after this condition it will not — Usman Iqbal, Sep 04 '18 at 10:50

score 3 · Answer 2 · edited Jul 01 '17 at 10:59

3

You don't need any directives to achieve this.

Simply refer to plnkr.co/edit/G3XxBnvAKhc53qy4foPr?p=preview; I just created a sample. The limitTo filter is more than enough to achieve.

edited Jul 01 '17 at 10:59

Peter Mortensen

30,738
21
105
131

answered Apr 07 '17 at 18:09

Srigar

1,648
3
14
28

Show more functionality in AngularJS?

2 Answers2