Begrenzen Sie die Länge eines Strings mit AngularJS

225

Ich habe folgendes:

<div>{{modal.title}}</div>

Gibt es eine Möglichkeit, die Länge der Zeichenfolge auf 20 Zeichen zu begrenzen?

Und eine noch bessere Frage wäre, gibt es eine Möglichkeit, die Zeichenfolge so zu ändern, dass sie abgeschnitten und ...am Ende angezeigt wird, wenn sie mehr als 20 Zeichen umfasst?

angularjs filter angularjs-filter Alan2
quelle

3

jsfiddle.net/tUyyx

Ufuk Hacıoğulları

344

Bearbeiten Sie die neueste Version von AngularJSAngeboten limitToFilter .

Sie benötigen einen benutzerdefinierten Filter wie folgt:

angular.module('ng').filter('cut', function () {
        return function (value, wordwise, max, tail) {
            if (!value) return '';

            max = parseInt(max, 10);
            if (!max) return value;
            if (value.length <= max) return value;

            value = value.substr(0, max);
            if (wordwise) {
                var lastspace = value.lastIndexOf(' ');
                if (lastspace !== -1) {
                  //Also remove . and , so its gives a cleaner result.
                  if (value.charAt(lastspace-1) === '.' || value.charAt(lastspace-1) === ',') {
                    lastspace = lastspace - 1;
                  }
                  value = value.substr(0, lastspace);
                }
            }

            return value + (tail || ' …');
        };
    });

Verwendung:

{{some_text | cut:true:100:' ...'}}

Optionen:

wortweise (boolesch) - wenn wahr, nur durch Wortgrenzen geschnitten,
max (Ganzzahl) - maximale Länge des Textes, auf diese Anzahl von Zeichen zugeschnitten,
tail (Zeichenfolge, Standard: '…') - Fügen Sie diese Zeichenfolge zur Eingabezeichenfolge hinzu, wenn die Zeichenfolge geschnitten wurde.

Eine andere Lösung : http://ngmodules.org/modules/angularjs-truncate (von @Ehvince)

EpokK
quelle

2

Es gibt ein Äquivalent bei Angular

Ehvince

anglejs-truncate ist keine Lösung, sondern Ihre IS-Lösung. Danke dir! Mach es als Modul!

Anton Bessonov

@epokk Gibt es eine Möglichkeit, dem Benutzer zu erlauben, nach dem Klicken auf die drei Punkte den vollständigen ungeschnittenen Text anzuzeigen? Wie eine "Show more"? Vielen Dank!

Thales P

Dies funktioniert gut, wenn wir es so verwenden {{post.post_content | cut: true: 100: '...'}} Aber schlägt fehl, wenn ich Folgendes verwende: <span ng-bind-html = "trustHtml (post.post_content | cut: true: 100: '...')"> < / span> Weil ich gezwungen bin, es in meinem Fall mit vertrauenswürdigem HTML zu verwenden

S Vinesh

Das wortweise Limit ist eine nette Funktion, die im Standard "limitTo"

pdizz

496

Hier ist die einfache einzeilige Korrektur ohne CSS.

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}

Govan
quelle

79

Einfach und elegant. Stattdessen '...'können Sie auch die HTML-Entität für Auslassungspunkte verwenden:'…'

Tom Harrison

wahrscheinlich die schmerzloseste Lösung. Denken Sie jedoch daran, dass die Filter relativ schwer sind und dies zu Leistungsproblemen bei einer großen Liste von Wiederholungen führen kann! :)

Cowwando

1

genial! Gibt es eine Möglichkeit, nach einer Anzahl von Zeilen anstatt nach einer Anzahl von Zeichen zu schneiden?

Axd

@axd Sie müssen dies in CSS versuchen oder eine Direktive schreiben, um dies zu erreichen.

Govan

1

Dies ist die beste Antwort. Der Leistungstreffer sollte bei einer angemessenen Anzahl von ng-Wiederholungen vernachlässigbar sein. Wenn Sie Hunderte von ng-Wiederholungen mit Inhalten zurückbringen, die abgeschnitten werden müssen, müssen Sie möglicherweise zum Zeichenbrett zurückkehren. Nizza Antwort, @Govan

erier

59

Ich weiß, dass dies spät ist, aber in der neuesten Version von anglejs (ich verwende 1.2.16) unterstützt der limitTo-Filter sowohl Strings als auch Arrays, sodass Sie die Länge des Strings wie folgt begrenzen können:

{{ "My String Is Too Long" | limitTo: 9 }}

welches ausgegeben wird:

My String

schlank
quelle

9

Bei dieser Lösung fehlt das "...". Das Ergebnis sollte sein: "My String ..."

Snæbjørn

Ich sehe die Auslassungspunkte hier nicht: plnkr.co/edit/HyAejS2DY781bqcT0RgV?p=preview . Können Sie das näher erläutern?

schlank

2

Was @ Snæbjørn sagt, ist, dass die Person, die die Frage gestellt hat, eine Lösung bevorzugt, die "..." am Ende der abgeschnittenen Zeichenfolge einfügt. Govans Antwort macht das.

Nahn

@Nahn danke für den Hinweis. Ich hätte wahrscheinlich einen Kommentar zu EpokKs Antwort anstelle einer anderen Antwort abgeben sollen.

schlank

52

Sie können dem div einfach eine CSS-Klasse hinzufügen und über anglejs einen Tooltip hinzufügen, damit der zugeschnittene Text mit der Maus darüber angezeigt wird.

<div class="trim-info" tooltip="{{modal.title}}">{{modal.title}}</div>

   .trim-info {
      max-width: 50px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;  
      line-height: 15px;
      position: relative;
   }

Sushrut
quelle

4

Textüberlauf: Auslassungspunkte, schön.

Chris Russo

4

Diese Technik ist zwar fantastisch, verhindert jedoch das Umbrechen von Text

Larry

Dies ist die richtige Antwort. Meine allgemeine Regel lautet: "Machen Sie in JavaScript nicht das, was in CSS möglich ist".

Aidan

4

Dies funktioniert nur für Text mit einer Zeile pro Absatz. Siehe für mehrzeiliges css-tricks.com/line-clampin (dies wird nicht von allen Browsern unterstützt).

Robert

Dies funktioniert auch, wenn Sie versuchen, die Länge eines Arrays zu begrenzen ng-repeat.

Chakeda

27

Ich hatte ein ähnliches Problem, hier ist was ich getan habe:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}

crc442
quelle

Ich würde das Leerzeichen zwischen beiden Ausgängen entfernen, um Zeilenumbrüche zu vermeiden

Ignacio Vazquez

21

< div >{{modal.title | limitTo:20}}...< / div>

Thiago Araújo
quelle

Einfachster Ansatz und dennoch funktional. Es wird jedoch davon ausgegangen, dass jeder Titel mehr als 20 Zeichen enthält und dies in einigen Fällen unerwartet sein kann.

Henrique M.

18

Elegantere Lösung:

HTML:

<html ng-app="phoneCat">
  <body>
    {{ "AngularJS string limit example" | strLimit: 20 }}
  </body>
</html>

Winkelcode:

 var phoneCat = angular.module('phoneCat', []);

 phoneCat.filter('strLimit', ['$filter', function($filter) {
   return function(input, limit) {
      if (! input) return;
      if (input.length <= limit) {
          return input;
      }

      return $filter('limitTo')(input, limit) + '...';
   };
}]);

Demo:

http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs

Anam
quelle

Kann ich vorschlagen, eine Rückgabe hinzuzufügen, wenn der inputWert dynamisch ist? dh if (!input) {return;}sonst wird es JS-Konsolenfehler geben

mcranston18

1

@ mcranston18 hinzugefügt. Danke dir.

Anam

15

Da wir nur dann Auslassungspunkte benötigen, wenn die Zeichenfolgenlänge über dem Grenzwert liegt, erscheint es angemessener, Auslassungspunkte durch Verwenden ng-ifals durch Binden hinzuzufügen .

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

mnishiguchi
quelle

7

Es gibt eine Option

.text {
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            padding: 5px;
            text-overflow: ellipsis;(...)
        }

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi qui soluta labore! Facere nisi aperiam sequi dolores voluptatum delectus vel vero animi, commodi harum molestias deleniti, quasi nesciunt. Distinctio veniam minus ut vero rerum debitis placeat veritatis doloremque laborum optio, nemo quibusdam ad, sed cum quas maxime hic enim sint at quos cupiditate qui eius quam tempora. Ab sint in sunt consequuntur assumenda ratione voluptates dicta dolor aliquid at esse quaerat ea, veritatis reiciendis, labore repellendus rem optio debitis illum! Eos dignissimos, atque possimus, voluptatibus similique error. Perferendis error doloribus harum enim dolorem, suscipit unde vel, totam in quia mollitia.</div>

Erweitern Sie das Snippet

Aleksandr Havrylov
quelle

7

Die einfachste Lösung, die ich gefunden habe, um die Saitenlänge einfach zu begrenzen, war {{ modal.title | slice:0:20 }}, und dann von @Govan oben zu leihen, können {{ modal.title.length > 20 ? '...' : ''}}Sie die Aufhängepunkte hinzufügen, wenn die Saite länger als 20 ist. Das Endergebnis lautet also einfach:

{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

Maudulus
quelle

4

Hier ist ein benutzerdefinierter Filter zum Abschneiden von Text. Es ist von der Lösung von EpokK inspiriert, aber an meine Bedürfnisse und Vorlieben angepasst.

angular.module('app').filter('truncate', function () {

    return function (content, maxCharacters) {

        if (content == null) return "";

        content = "" + content;

        content = content.trim();

        if (content.length <= maxCharacters) return content;

        content = content.substring(0, maxCharacters);

        var lastSpace = content.lastIndexOf(" ");

        if (lastSpace > -1) content = content.substr(0, lastSpace);

        return content + '...';
    };
});

Und hier sind die Unit-Tests, damit Sie sehen können, wie es sich verhalten soll:

describe('truncate filter', function () {

    var truncate,
        unfiltered = " one two three four ";

    beforeEach(function () {

        module('app');

        inject(function ($filter) {

            truncate = $filter('truncate');
        });
    });

    it('should be defined', function () {

        expect(truncate).to.be.ok;
    });

    it('should return an object', function () {

        expect(truncate(unfiltered, 0)).to.be.ok;
    });

    it('should remove leading and trailing whitespace', function () {

        expect(truncate(unfiltered, 100)).to.equal("one two three four");
    });

    it('should truncate to length and add an ellipsis', function () {

        expect(truncate(unfiltered, 3)).to.equal("one...");
    });

    it('should round to word boundaries', function () {

        expect(truncate(unfiltered, 10)).to.equal("one two...");
    });

    it('should split a word to avoid returning an empty string', function () {

        expect(truncate(unfiltered, 2)).to.equal("on...");
    });

    it('should tolerate non string inputs', function () {

        expect(truncate(434578932, 4)).to.equal("4345...");
    });

    it('should tolerate falsey inputs', function () {

        expect(truncate(0, 4)).to.equal("0");

        expect(truncate(false, 4)).to.equal("fals...");
    });
});

SharkAlley
quelle

3

Sie können die Länge einer Zeichenfolge oder eines Arrays mithilfe eines Filters begrenzen. Überprüfen Sie dieses vom AngularJS-Team geschriebene.

MAM
quelle

Geben Sie

3

In HTML wird es zusammen mit dem LimitTo-Filter verwendet, der von Angular selbst wie unten bereitgestellt wird .

    <p> {{limitTo:30 | keepDots }} </p>

Filter keepDots:

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }

Shushanth Pallegar
quelle

3

Wenn Sie etwas wollen wie: InputString => StringPart1 ... StringPart2

HTML:

<html ng-app="myApp">
  <body>
    {{ "AngularJS string limit example" | strLimit: 10 : 20 }}
  </body>
</html>

Winkelcode:

 var myApp = angular.module('myApp', []);

 myApp.filter('strLimit', ['$filter', function($filter) {
   return function(input, beginlimit, endlimit) {
      if (! input) return;
      if (input.length <= beginlimit + endlimit) {
          return input;
      }

      return $filter('limitTo')(input, beginlimit) + '...' + $filter('limitTo')(input, -endlimit) ;
   };
}]);

Beispiel mit folgenden Parametern:
beginLimit = 10
endLimit = 20

Bevor : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Nach : - /home/hous...3720DF6680E17036.jar

Vhamon
quelle

2

Use this in your html - {{value | limitTocustom:30 }}

and write this custom filter in your angular file,

app.filter('limitTocustom', function() {
    'use strict';
    return function(input, limit) {
        if (input) {
            if (limit > input.length) {
                return input.slice(0, limit);
            } else {
                return input.slice(0, limit) + '...';
            }
        }
    };
});

// if you initiate app name by variable app. eg: var app = angular.module('appname',[])

Mohideen bin Mohammed
quelle

2

Dies ist möglicherweise nicht vom Ende des Skripts, aber Sie können das folgende CSS verwenden und diese Klasse zum div hinzufügen. Dadurch wird der Text abgeschnitten und beim Mouseover wird auch der Volltext angezeigt. Sie können einen weiteren Text hinzufügen und einen eckigen Klick-Hadler hinzufügen, um die Klasse von div auf cli zu ändern

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

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }

Kurkula
quelle

2

Wenn Sie zwei Bindungen haben {{item.name}}und {{item.directory}}.

Und möchten die Daten als Verzeichnis gefolgt vom Namen anzeigen, wobei '/ root' als Verzeichnis und 'Machine' als Name (/ root-machine) angenommen werden.

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}

Harish Reddy Pothula
quelle

Gibt es eine Chance, dass Sie diese Antwort auf die falsche Frage gepostet haben? Dies scheint nichts mit der Begrenzung der Länge eines Strings mit AngularJS zu tun zu haben.

BSMP

1

Sie können dieses npm-Modul verwenden: https://github.com/sparkalow/angular-truncate

Fügen Sie den Filter zum Abschneiden folgendermaßen in Ihr App-Modul ein:

var myApp = angular.module('myApp', ['truncate']);

und wenden Sie den Filter in Ihrer App folgendermaßen an:

{{ text | characters:20 }}

Mel Michael
quelle

1

<div>{{modal.title | slice: 0: 20}}</div>

Vikas
quelle

0

Ich habe diese Direktive erstellt, die dies einfach macht, die Zeichenfolge auf ein bestimmtes Limit abschneidet und einen Umschalter "Mehr oder weniger anzeigen" hinzufügt. Sie finden es auf GitHub: https://github.com/doukasd/AngularJS-Components

es kann so verwendet werden:

<p data-dd-collapse-text="100">{{veryLongText}}</p>

Hier ist die Richtlinie:

// a directive to auto-collapse long text
app.directive('ddCollapseText', ['$compile', function($compile) {
return {
    restrict: 'A',
    replace: true,
    link: function(scope, element, attrs) {

        // start collapsed
        scope.collapsed = false;

        // create the function to toggle the collapse
        scope.toggle = function() {
            scope.collapsed = !scope.collapsed;
        };

        // get the value of the dd-collapse-text attribute
        attrs.$observe('ddCollapseText', function(maxLength) {
            // get the contents of the element
            var text = element.text();

            if (text.length > maxLength) {
                // split the text in two parts, the first always showing
                var firstPart = String(text).substring(0, maxLength);
                var secondPart = String(text).substring(maxLength, text.length);

                // create some new html elements to hold the separate info
                var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope);
                var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);

                // remove the current contents of the element
                // and add the new ones we created
                element.empty();
                element.append(firstSpan);
                element.append(secondSpan);
                element.append(moreIndicatorSpan);
                element.append(toggleButton);
            }
        });
    }
};
}]);

Und ein bisschen CSS dazu:

.collapse-text-toggle {
font-size: 0.9em;
color: #666666;
cursor: pointer;
}
.collapse-text-toggle:hover {
color: #222222;
}
.collapse-text-toggle:before {
content: '\00a0(';
}
.collapse-text-toggle:after {
content: ')';
}

Dimitris
quelle

0

Diese Lösung verwendet ausschließlich ng Tag in HTML.

Die Lösung besteht darin, den Langtext zu begrenzen, der am Ende mit dem Link "Mehr anzeigen ..." angezeigt wird. Wenn der Benutzer auf den Link "Mehr anzeigen ..." klickt, wird der Rest des Textes angezeigt und der Link "Mehr anzeigen ..." entfernt.

HTML:

<div ng-init="limitText=160">
   <p>{{ veryLongText | limitTo: limitText }} 
       <a href="javascript:void(0)" 
           ng-hide="veryLongText.length < limitText" 
           ng-click="limitText = veryLongText.length + 1" > show more..
       </a>
   </p>
</div>

Amirul
quelle

0

DIE EINFACHSTE LÖSUNG -> Ich habe festgestellt, dass Material Design (1.0.0-rc4) die Arbeit erledigt. Der md-input-containerwird die Arbeit für Sie erledigen. Es verkettet die Zeichenfolge und fügt Elipsen hinzu. Außerdem hat es den zusätzlichen Vorteil, dass Sie darauf klicken können, um den vollständigen Text zu erhalten, sodass es sich um die gesamte Enchilada handelt. Möglicherweise müssen Sie die Breite des einstellenmd-input-container .

HTML:

<md-input-container>
   <md-select id="concat-title" placeholder="{{mytext}}" ng-model="mytext" aria-label="label">
      <md-option ng-selected="mytext" >{{mytext}}
      </md-option>
   </md-select>
</md-input-container>

CS:

#concat-title .md-select-value .md-select-icon{
   display: none; //if you want to show chevron remove this
}
#concat-title .md-select-value{
   border-bottom: none; //if you want to show underline remove this
}

Helzgate
quelle

0

Begrenzen Sie die Anzahl der Wörter mit einem benutzerdefinierten Winkelfilter: So habe ich einen Winkelfilter verwendet, um die Anzahl der mit einem benutzerdefinierten Filter angezeigten Wörter zu begrenzen.

HTML:

<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>

Winkel- / Javascript-Code

angular.module('app')
.filter('limitWordsTo', function () {
    return function (stringData, numberOfWords) {
        //Get array of words (determined by spaces between words)
        var arrayOfWords = stringData.split(" ");

        //Get loop limit
        var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords;

        //Create variables to hold limited word string and array iterator
        var limitedString = '', i;
        //Create limited string bounded by limit passed in
        for (i = 0; i < loopLimit; i++) {
            if (i === 0) {
                limitedString = arrayOfWords[i];
            } else {
                limitedString = limitedString + ' ' + arrayOfWords[i];
            }
        }
        return limitedString;
    }; 
}); //End filter

Geoff
quelle

0

Es funktioniert in Ordnung für mich 'In span', ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... lesen Sie mehr. 'Endspanne'

GK
quelle

0

Ich benutze einen netten Satz nützlicher Filterbibliothek "Angular-Filter" und eine davon namens "Truncate" ist auch nützlich.

https://github.com/a8m/angular-filter#truncate

Verwendung ist:

text | truncate: [length]: [suffix]: [preserve-boolean]

Lukas Jelinek
quelle

Begrenzen Sie die Länge eines Strings mit AngularJS

Antworten:

Verwendung:

Optionen: