Afficher plus de fonctionnalités dans AngularJS?

Question

J'ai une liste d'articles avec leurs informations. Le problème est que je veux afficher la description jusqu'à 50 caractères. Si cette valeur est dépassée, je veux afficher un bouton show more. Quand cela est cliqué, je veux montrer le texte intégral. Je veux le faire avec des filtres mais je ne sais pas comment y parvenir.

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

Est-il possible que je peux écrire <a href="">show more</a> lien à l'emplacement des personnages ...?

Ou existe-t-il une autre méthode pour atteindre mon objectif?

Answer 1

Observation:

• Votre implémentation est correcte. Le problème est avec votre version AngularJS.
• Les AngularJS limitTo filtre est disponible pour les chaînes de tableau et v1.2.1 partir.

travail Démo

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>

Mise à jour Plnkr selon le commentaire avec show less fonctionnalité.

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

Vous ne avez pas besoin de directives pour y parvenir.

Il suffit de se référer à plnkr.co/edit/G3XxBnvAKhc53qy4foPr?p=preview; Je viens de créer un échantillon. Le filtre limitTo est plus que suffisant pour atteindre.