Ich arbeite mit AngularJS und Ionic. Ich verwende das ng-bind-html, um Daten von einer Rest-API abzurufen. Ich möchte die Anzahl der Zeichen begrenzen, habe aber auch drei Punkte nach den Zeichen, um dem Benutzer zu zeigen, dass mehr zu lesen ist ...

Bisher habe ich:

<p ng-bind-html="item.excerpt | limitTo: 100"></p>

Dies begrenzt jedoch nur die Zeichen und schneidet sie ab.

2
Sole 6 Aug. 2015 im 17:51

6 Antworten

Beste Antwort

Dies wurde mit https://github.com/sparkalow/angular-truncate behoben. Sehr einfach und benutzerfreundlich und kann mit ng-bind-html verwendet werden

0
Sole 7 Aug. 2015 im 09:27

Die Klasse zum Abschneiden von Text in Bootstrap hat den Job für mich erledigt.

Hinweis: Der Container sollte eine feste Breite oder einen festen Spaltenanteil haben, damit dies funktioniert

Ref: https://getbootstrap.com/docs/4.0/utilities / text / # Textumbruch und -überlauf

0
PPM1988 10 Juli 2019 im 08:06

Ehrlich gesagt scheint Ihre Frage eher auf CSS ausgerichtet zu sein

Sie können Text abschneiden und Punkte (...) mit "Auslassungspunkten" hinzufügen.

Beispiel, wenn Sie in HTML etwas haben wie:

<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p>

Und Sie fügen so etwas auf CSS hinzu:

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

p.block {
    width: 300px;
}

Ergebnis ist so etwas wie:

<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>

Wenn Sie eine Schaltfläche "Lesen Sie mehr" implementieren möchten, entfernen Sie beim Klicken einfach die Auslassungsklasse, und der gesamte Text wird angezeigt.

Mehr Infos dort: Ellipsen-Informationen

13
Aethiss 7 Aug. 2015 im 08:12

Wenn Sie eine ältere ionische Version verwenden, die beim Binden kein 'limitTo:' hat, wie die Antwort von @ c0r3yz, versuchen Sie dies in Ihrem HTML

{{ item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt }}
1
Yudhistira Bayu 21 Jän. 2019 im 13:22

Für einen reinen Winkelansatz können Sie Folgendes tun:

{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}
18
c0r3yz 12 Jän. 2017 im 20:53

In meinem Projekt habe ich mir diesen Filter ausgedacht:

angular.module('yourModule').filter('limitToDots', function($filter) {
    return function(input, limit, begin, dots) {
        if (!input || input.length <= limit) {
            return input;
        }

        begin = begin || 0;
        dots = dots || '...';

        return $filter('limitTo')(input, limit, begin) + dots;
    };
});

Verwendung:

<span>{{ text | limitToDots : 50 }}</span>
<span ng-bind="text | limitToDots : 50"></span>
<span ng-bind-html="text | limitToDots : 50"></span>
2
Andrey Mischenko 31 Jän. 2018 im 19:18