Ogranicz długość łańcucha za pomocą AngularJS

225

Mam następujące:

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

Czy istnieje sposób na ograniczenie długości ciągu do 20 znaków?

A jeszcze lepszym pytaniem byłoby to, czy istnieje sposób, aby zmienić ciąg, który ma zostać obcięty i pokazać ...na końcu, jeśli ma więcej niż 20 znaków?

angularjs filter angularjs-filter Alan2
źródło

3

jsfiddle.net/tUyyx

Ufuk Hacıoğulları

344

Edytuj najnowszą wersję filtruAngularJS ofert .limitTo

Potrzebujesz takiego filtra niestandardowego :

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 || ' …');
        };
    });

Stosowanie:

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

Opcje:

wordwise (boolean) - jeśli to prawda, wycięte tylko granicami słów,
max (liczba całkowita) - maksymalna długość tekstu, przycięta do tej liczby znaków,
tail (ciąg, domyślnie: „…”) - dodaj ten ciąg do wejściowego ciągu, jeśli ciąg został przecięty.

Inne rozwiązanie : http://ngmodules.org/modules/angularjs-truncate (autor: @Ehvince)

EpokK
źródło

2

W modułach kątowych istnieje odpowiednik: ngmodules.org/modules/angularjs-truncate

Ehvince

angularjs-truncate nie jest rozwiązaniem, ale rozwiązaniem IS. Dziękuję Ci! Zrób to jako moduł!

Anton Bessonov

@epokk Czy istnieje sposób, aby umożliwić użytkownikowi, po kliknięciu trzech kropek, wyświetlenie pełnego nieciętego tekstu? Jak „pokaż więcej”? Dzięki!

Thales P

działa to dobrze, gdy używamy go w ten sposób {{post.post_content | cut: true: 100: '...'}} Ale kończy się niepowodzeniem, gdy używam w ten sposób <span ng-bind-html = "trustHtml (post.post_content | cut: true: 100: '...')"> < / span> Ponieważ jestem zmuszony używać go z zaufanym HTML

em

Limit słowny to fajna funkcja, która wydaje się nie istnieć w domyślnym „limitTo”

pdizz

496

Oto prosta poprawka jednej linii bez css.

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

Govan
źródło

79

Prosty i elegancki. Zamiast tego '...'możesz również użyć encji HTML do elipsy:'…'

Tom Harrison

prawdopodobnie najbardziej bezbolesne rozwiązanie. Pamiętaj jednak, że filtry są stosunkowo ciężkie, co może mieć problemy z wydajnością na ogromnej liście powtórzeń ng! :)

Cowwando

1

niesamowite! czy istnieje sposób cięcia po kilku wierszach, a nie po kilku znakach?

axd

@axd Musisz tego spróbować w css lub napisać dyrektywę, aby to osiągnąć.

Govan

1

To najlepsza odpowiedź. Trafienie w wydajność powinno być nieistotne przy rozsądnej liczbie powtórzeń ng. Jeśli przywracasz setki powtórzeń ng z treścią, która musi zostać obcięta, być może trzeba będzie wrócić do tablicy kreślarskiej. Dobra odpowiedź, @Govan

erier

59

Wiem, że jest późno, ale w najnowszej wersji angularjs (używam 1.2.16) filtr limitTo obsługuje ciągi znaków, a także tablice, dzięki czemu możesz ograniczyć długość łańcucha w następujący sposób:

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

który wyświetli:

My String

szczupły
źródło

9

W tym rozwiązaniu brakuje „...”. Wynik powinien być następujący: „My String ...”

Snæbjørn

Nie widzę tutaj elipsy: plnkr.co/edit/HyAejS2DY781bqcT0RgV?p=preview . Czy możesz rozwinąć?

szczupły

2

@ Snæbjørn mówi, że osoba, która zadała pytanie, wolała rozwiązanie, które wstawia „...” na końcu obciętego łańcucha. Tak robi odpowiedź Govana.

Nahn

@Nahn dziękuję za zwrócenie na to uwagi. Prawdopodobnie powinienem był skomentować odpowiedź EpokK zamiast innej odpowiedzi.

szczupły

52

Możesz po prostu dodać klasę css do div i dodać podpowiedź poprzez angularjs, aby przycięty tekst był widoczny po najechaniu myszą.

<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
źródło

4

przepełnienie tekstu: elipsa, fajna.

Chris Russo

4

ta technika, choć niesamowita, zapobiega zawijaniu tekstu

Larry,

To jest poprawna odpowiedź. Moja ogólna zasada brzmi: „nie rób w JavaScript tego, co można zrobić w CSS”.

aidan

4

Działa to tylko w przypadku tekstu z jednym wierszem na akapit. Zobacz multiline css-tricks.com/line-clampin (nie wszystkie przeglądarki obsługują to).

Robert

Działa to również, jeśli próbujesz ograniczyć długość tablicy ng-repeat.

czakeda

27

Miałem podobny problem, oto co zrobiłem:

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

crc442
źródło

Usunęłem spację między obydwoma wyjściami, aby uniknąć przerwania linii

Ignacio Vazquez

21

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

Thiago Araújo
źródło

Najprostsze podejście, ale funkcjonalne. Zakłada się jednak, że każdy tytuł miałby więcej niż 20 znaków, co w niektórych przypadkach może być nieoczekiwane.

Henrique M.

18

Bardziej eleganckie rozwiązanie:

HTML:

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

Kod kątowy:

 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) + '...';
   };
}]);

Próbny:

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

Anam
źródło

Czy mogę zasugerować dodanie zwrotu w przypadku, gdy inputwartość jest dynamiczna? tzn. w if (!input) {return;}przeciwnym razie wystąpią błędy konsoli JS

mcranston18,

1

@ mcranston18 dodane. Dziękuję Ci.

Anam

15

Ponieważ potrzebujemy wielokropka tylko wtedy, gdy długość łańcucha przekracza limit, bardziej odpowiednie wydaje się dodanie wielokropka za pomocą ng-ifniż wiązania.

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

mnishiguchi
źródło

7

Istnieje opcja

.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>

Rozwiń fragment kodu

Aleksandr Havrylov
źródło

7

Najprostszym rozwiązaniem, jakie znalazłem, by po prostu ograniczyć długość sznurka było {{ modal.title | slice:0:20 }}, a następnie pożyczając od @Govan powyżej, możesz użyć, {{ modal.title.length > 20 ? '...' : ''}}aby dodać punkty zawieszenia, jeśli sznurek jest dłuższy niż 20, więc końcowy wynik jest po prostu:

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

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

maudulus
źródło

4

Oto niestandardowy filtr do obcinania tekstu. Jest zainspirowany rozwiązaniem EpokK, ale zmodyfikowany do moich potrzeb i gustów.

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 + '...';
    };
});

A oto testy jednostkowe, dzięki czemu możesz zobaczyć, jak ma się zachowywać:

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
źródło

3

Możesz ograniczyć długość łańcucha lub tablicy za pomocą filtra. Sprawdź ten napisany przez zespół AngularJS.

MAM
źródło

podaj także więcej szczegółów

Parixit

3

W html jest używany wraz z filtrem limitTo zapewnianym przez sam kątownik jak poniżej ,

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

filtruj 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
źródło

3

Jeśli chcesz coś takiego: InputString => StringPart1 ... StringPart2

HTML:

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

Kod kątowy:

 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) ;
   };
}]);

Przykład z następującymi parametrami:
beginLimit = 10
endLimit = 20

Przed : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Po : - /home/hous...3720DF6680E17036.jar

Vhamon
źródło

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
źródło

2

To może nie być koniec skryptu, ale możesz użyć poniższego css i dodać tę klasę do div. Spowoduje to obcięcie tekstu i wyświetlenie pełnego tekstu po najechaniu kursorem myszy. Możesz dodać więcej tekstu i dodać hadler kliknięcia kątowego, aby zmienić klasę div na cli

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

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

Kurkula
źródło

2

Jeśli masz dwa powiązania {{item.name}}i {{item.directory}}.

I chcę pokazać dane jako katalog, po którym następuje nazwa, przyjmując „/ root” jako katalog i „Machine” jako nazwę (/ root-machine).

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

Harish Reddy Pothula
źródło

Czy jest szansa, że umieściłeś tę odpowiedź na niewłaściwym pytaniu? Wydaje się, że nie ma to nic wspólnego z ograniczaniem długości łańcucha za pomocą AngularJS.

BSMP

1

Możesz użyć tego modułu npm: https://github.com/sparkalow/angular-truncate

Wstaw filtr obcięcia do modułu aplikacji w następujący sposób:

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

i zastosuj filtr w swojej aplikacji w ten sposób:

{{ text | characters:20 }}

Mel Michael
źródło

1

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

Vikas
źródło

0

Stworzyłem tę dyrektywę, która łatwo to robi, skraca ciąg znaków do określonego limitu i dodaje przełącznik „pokaż więcej / mniej”. Możesz go znaleźć na GitHub: https://github.com/doukasd/AngularJS-Components

można go użyć w następujący sposób:

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

Oto dyrektywa:

// 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);
            }
        });
    }
};
}]);

I trochę CSS do tego:

.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
źródło

0

To rozwiązanie wykorzystuje wyłącznie tag ng w HTML.

Rozwiązaniem jest ograniczenie długiego tekstu wyświetlanego za pomocą linku „pokaż więcej ...” na jego końcu. Jeśli użytkownik kliknie link „pokaż więcej ...”, wyświetli resztę tekstu i usunie link „pokaż więcej ...”.

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
źródło

0

NAJ ŁATWIEJSZE ROZWIĄZANIE -> jakie znalazłem, to pozwolenie Material Design (1.0.0-rc4) na wykonanie pracy. md-input-containerZrobi to za Ciebie. Kończy ciąg znaków i dodaje elipsy, a ponadto ma tę dodatkową zaletę, że pozwala kliknąć go, aby uzyskać pełny tekst, więc jest to cała enchilada. Może być konieczne ustawienie szerokości md-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
źródło

0

Ogranicz liczbę słów za pomocą niestandardowego filtra kątowego: Oto jak użyłem filtra kątowego, aby ograniczyć liczbę słów wyświetlanych za pomocą niestandardowego filtra.

HTML:

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

Kod kątowy / JavaScript

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
źródło

0

Dla mnie działa dobrze „In span”, ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... czytaj więcej. „koniec zakresu”

GK
źródło

0

Używam ładnego zestawu przydatnych bibliotek filtrów „Filtr kątowy”, a jeden z nich o nazwie „obcinaj” też jest przydatny.

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

użycie jest:

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

Lukas Jelinek
źródło

Ogranicz długość łańcucha za pomocą AngularJS

Odpowiedzi:

Stosowanie:

Opcje: