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?

Answer 1

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>

Answer 2

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.