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. — Rohìt Jíndal
– Rohìt Jíndal, Commented Apr 10, 2017 at 6:56

Peter Mortensen · Accepted Answer · 2017-07-01 10:54:53Z

6

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>

edited Jul 1, 2017 at 10:54

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 7, 2017 at 17:45

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jones Joseph Over a year ago

Is everybody seeing these script errors in the snippet console or its just me ?

Rohìt Jíndal Over a year ago

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.

Rohìt Jíndal Over a year ago

@UsmanIqbal I update the answer as per the Show less functionality requirement.

Usman Iqbal Over a year ago

@rohit although i have implemented my way and it worked but still i will mark your answer correct. Cheers

Rod Over a year ago

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?

|

Peter Mortensen · Accepted Answer · 2017-07-01 10:59:20Z

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 1, 2017 at 10:59

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 7, 2017 at 18:09

Srigar

1,6983 gold badges14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Show more functionality in AngularJS?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related