it-swarm.com.de

Begrenzen Sie die Länge einer Zeichenfolge mit AngularJS

Ich habe folgendes:

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

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

Und eine noch bessere Frage wäre, ob ich die gekürzte Zeichenfolge ändern und am Ende ... anzeigen kann, wenn sie mehr als 20 Zeichen enthält.

218
Alan2

Edit Die neueste Version von AngularJS bietet limitTo filter .

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

Verwendungszweck:

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

Optionen:

  • wortweise (boolean) - wenn wahr, nur durch Wortgrenzen geschnitten,
  • max (Ganzzahl) - maximale Länge des Textes, auf diese Anzahl Zeichen geschnitten,
  • tail (string, default: '…') - fügt diesen String der Eingabe hinzu String, wenn der String geschnitten wurde.

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

338
EpokK

Hier ist der einfache einzeilige Fix ohne CSS.

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

Ich weiß, dass dies zu 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 folgendermaßen begrenzen können:

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

welche ausgegeben werden:

My String
57
slim

Sie können einfach eine CSS-Klasse zum Div hinzufügen und einen Tooltip über anglejs hinzufügen, so dass der getrimmte 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;
   }
50
Sushrut

Ich hatte ein ähnliches Problem. Ich habe folgendes getan:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
27
crc442
< div >{{modal.title | limitTo:20}}...< / div>
17
Thiago Araújo

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

17
Anam

Da wir Ellipsis nur benötigen, wenn die Länge der Zeichenkette den Grenzwert überschreitet, erscheint es sinnvoller, Ellipsis mithilfe von ng-if als Bindung hinzuzufügen.

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

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>

7

Hier ist ein benutzerdefinierter Filter zum Abschneiden von Text. Es ist von der Lösung von EpokK inspiriert, aber für meine Bedürfnisse und meinen Geschmack 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...");
    });
});
4
SharkAlley

Wenn Sie etwas möchten: 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 

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

3
vhamon

Die einfachste Lösung, die ich gefunden habe, um die Länge der Zeichenkette einfach zu begrenzen, war {{ modal.title | slice:0:20 }}. Wenn Sie oben bei @Govan leihen, können Sie {{ modal.title.length > 20 ? '...' : ''}} verwenden, um die Suspendierungspunkte hinzuzufügen, wenn die Zeichenfolge länger als 20 ist. Das Endergebnis lautet also: 

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

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

3
maudulus

Sie können die Länge einer Zeichenfolge oder eines Arrays mithilfe eines Filters begrenzen. Check this geschrieben vom AngularJS-Team.

3
MAM

In html wird es zusammen mit dem limitTo-Filter verwendet, der von angle selbst als unter,

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

        }


    }
3

Dies ist möglicherweise nicht vom Ende des Skripts aus. Sie können jedoch die folgende Datei verwenden, um diese Klasse zum div hinzuzufügen. Dadurch wird der Text abgeschnitten und beim Mouseover wird Volltext angezeigt. Sie können einen weiteren Text und einen winkligen 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;
    }
2
Kurkula
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',[])

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

Und Sie möchten die Daten als Verzeichnis anzeigen, gefolgt vom Namen, und dabei "/ root" als Verzeichnis und "Machine" als Namen (/ root-machine) voraussetzen.

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

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

Fügen Sie den abgeschnittenen Filter 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 }} 
1
charming mel

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

0
G. K.

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

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
}
0
Helzgate

Ich benutze den Nice-Satz der nützlichen Filterbibliothek "Angular-filter" und einer von ihnen, der als "abgeschnitten" bezeichnet wird, ist ebenfalls nützlich.

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

verwendung ist:

text | truncate: [length]: [suffix]: [preserve-boolean]
0
Lukas Jelinek

Ich habe diese Direktive erstellt, die das einfach macht, den String auf ein angegebenes Limit abschneidet und einen "show more/less" -Schalter hinzufügt. Sie finden es auf GitHub: https://github.com/doukasd/AngularJS-Components

es kann wie folgt verwendet werden:

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

Hier ist die Direktive:

// 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 paar 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: ')';
}
0
Dimitris

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>

Angular/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
0
Geoff

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

Die Lösung besteht darin, den langen Text, der am Ende mit dem Link "Mehr anzeigen" angezeigt wird, zu begrenzen. 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>
0
Amirul