web-dev-qa-db-fra.com

AngularJS: comment afficher des points de suspension en utilisant le filtre limitTo uniquement lorsqu'une chaîne dépasse la limite

J'utilise le filtre limitTo sur certaines chaînes. Si la chaîne est inférieure à, par exemple, 10 caractères, elle est affichée telle quelle. Si la chaîne contient plus de 10 caractères, je souhaite afficher des ellipses après avoir coupé la chaîne au dixième caractère. Y a-t-il un raccourci angulaire pour le faire? Merci

par exemple:

{{main.title | limitTo:10}}

si main.title = "Une bonne journée", le résultat serait: Une bonne journée

si main.title = "Une journée terrible", le résultat serait: Une ... terrible.

angularjsstringfilter
11
d1du

Eh bien, si vous voulez, vous pouvez créer un filtre pour cela, mais j'utiliserais la directive ngIf, comme ci-dessous:

(function() {
  'use strict';

  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.text = 'Really longer than 10';
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">
  Without limit: <span ng-bind="ctrl.text"></span>
  <hr>
  With limit: <span ng-bind="ctrl.text | limitTo:10"></span>
  <span ng-if="ctrl.text.length > 10">...</span>
</body>

</html>

26
developer033

J'espère que cela t'aides :

{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
35
BeingSuman

Utilisez <span ng-class="{'Ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>

Vous devez définir une classe CSS .Ellipsis:after{ content: '...'; } et une variable d’étendue limit

OU

{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}


(function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Hello World";
          $scope.limit = 10;
        });
    })();
.Ellipsis:after{ content: '...'; }
<!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <h3>Using Option1</h3>
      <span ng-class="{'Ellipsis': text.length > limit}">{{ text | limitTo:limit }}</span>
      <br>
      <h3>Using Option2</h3>
      <span>{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}</span>
    </body>

    </html>

4
muasif80

Écrire votre propre filtre basé sur limitTo est le meilleur moyen de le faire. 

angular.module('your-module-name').filter('dotsFilter', [
    '$filter',
    function ($filter) {
        /**
         * Shorten the input and add dots if it's needed
         * @param {string} input 
         * @param {number} limit
         */
        function dotsFilter(input, limit) {
            var newContent = $filter('limitTo')(input, limit);
            if(newContent.length < input.length) { newContent += '...'; }
            return newContent;
        }

        return dotsFilter;
    }
]);

Utiliser en vue:

{{ model.longTextData | dotsFilter:10 }}
4
Krzysztof Raciniewski

Comme d'autres réponses utilisant angularjs sont déjà postées, je vais vous donner une technique simple en css pour le faire.

   (function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";
        });
    })();
span.Ellipsis {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: Ellipsis;
}
    <!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <span ng:class="{true:'Ellipsis', false:''}[text.length>=10]" style="max-width: 10ch;">{{text}}</span>
    </body>

    </html>

2
Raman Sahasi
<div maxlength="59"> 
  {{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}} 
</div>

ceci est utile et fonctionne aussi, Interface utilisateur 5 matériaux

1
user10889447

Quelqu'un qui lit à l'avenir peut envisager d'utiliser CSS au lieu de JS. Quelque chose comme:

.Ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
0
diegopso