javascript - Show more functionality in AngularJS? -

i have list of items along information. problem want show description 50 characters. if value exceeded want show show more button. when clicked, want show full text. want filters don't know how achieve this.

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

is there possibility can write <a href="">show more</a> link @ location of characters ...?

or there method of achieving goal?

observation:

• your implementation correct. issue angularjs version.
• the angularjs limitto filter available both array , strings v1.2.1 onwards.

working demo

var myapp = angular.module('myapp',[]);    myapp.controller('myctrl', function($scope) {        // initial 50 characters displayed.      $scope.strlimit = 50;        // string      $scope.jobs = {        description: "hi have list of items along information. problem want show description 50 letters, if exceeds value want show show more button upon clicking want show full text. want filters, don't know 1 achieve way."      };      // event trigger on click of 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 per comment show less functionality.

var myapp = angular.module('myapp',[]);    myapp.controller('myctrl', function($scope) {        // initial 50 characters displayed.      $scope.strlimit = 50;        // string      $scope.jobs = {        description: "hi. have list of items along information. problem want show description 50 letters, if exceeds value want show show more button upon clicking want show full text. want filters, don't know 1 achieve way."      };      // event trigger on click of show more button.     $scope.showmore = function() {       $scope.strlimit = $scope.jobs.description.length;     };      // event trigger on click on 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>