Ограничить длину строки с помощью AngularJS

у меня есть следующие:

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

есть ли способ ограничить длину строки, чтобы сказать 20 символов?

и еще лучше было бы спросить, есть ли способ, которым я мог бы изменить строку, чтобы быть усеченным и показать ... в конце, если это более 20 символов?

216
angularjs angularjs-filter filter

24 ответов

редактировать Последняя версия AngularJSпредложения limitTo фильтр.

вам понадобится настраиваемый фильтр такой:

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

использование:

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

варианты:

  • wordwise (boolean) - если true, вырезать только по границам слов,
  • max (integer) - максимальная длина текста, сокращенная до этого количества символов,
  • tail (string, default:'...') - добавить эту строку на вход строка, если строка была разрезана.

другое решение: http://ngmodules.org/modules/angularjs-truncate (@Ehvince)

336

вот простое исправление одной строки без css.

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

Я знаю, что это поздно, но в последней версии angularjs( я использую 1.2.16) фильтр limitTo поддерживает строки, а также массивы, поэтому вы можете ограничить длину строки следующим образом:

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

что будет на выходе:

My String
57

вы можете просто добавить класс css в div и добавить подсказку через angularjs, чтобы обрезанный текст был виден на мыши.

<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

У меня была похожая проблема, вот что я сделал:

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

более элегантное решение:

HTML-код:

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

Угловое Код:

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

демо:

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

17

поскольку нам нужен многоточие только тогда, когда длина строки превышает предел, кажется более целесообразным добавить многоточие с помощью ng-if чем привязки.

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

есть вариант

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

вот пользовательский фильтр для усечения текста. Он вдохновлен решением EpokK, но модифицирован для моих нужд и вкусов.

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

и вот модульные тесты, чтобы вы могли видеть, как он должен себя вести:

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

вы можете ограничить длину строки или массива с помощью фильтра. Проверка этот написано командой AngularJS.

3

в html его используется вместе с фильтром limitTo, предоставленным angular как показано ниже,

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

фильтр keepDots :

     App.filter('keepDots' , keepDots)

       function keepDots() {

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

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

        }


    }
3

Если вы хотите что-то вроде : InputString =>StringPart1...StringPart2

HTML-код:

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

Угловое Код:

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

пример со следующими параметрами :
beginLimit = 10
endLimit = 20

до: - /дома/дома/номер/и т. д./ava_B0363852D549079E3720DF6680E17036.Джар
после: - / home / hous...3720DF6680E17036.Джар

3

самое простое решение, которое я нашел для простого ограничения длины строки было {{ modal.title | slice:0:20 }}, а затем заимствования из @Govan выше вы можете использовать {{ modal.title.length > 20 ? '...' : ''}} чтобы добавить точки подвеса, если строка длиннее 20, поэтому конечный результат просто:

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

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

3
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',[])
2

Это может быть не из конца скрипта, но вы можете использовать приведенный ниже css и добавить этот класс в div. Это усечет текст, а также покажет полный текст при наведении мыши. Вы можете добавить больше текста и добавить угловой клик hadler, чтобы изменить класс div на cli

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

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

вы можете использовать этот модуль npm:https://github.com/sparkalow/angular-truncate

вставьте усеченный фильтр в модуль приложения следующим образом:

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

и примените фильтр в своем приложении следующим образом:

{{ text | characters:20 }}
1

самое простое решение --> я нашел, чтобы позволить Material Design (1.0.0-rc4) делать работу. The md-input-container сделает работу для вас. Он объединяет строку и добавляет elipses плюс у него есть дополнительное преимущество, позволяющее вам щелкнуть по ней, чтобы получить полный текст, поэтому это вся энчилада. Возможно, Вам потребуется установить ширину 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
}
1

Если у вас есть две привязки {{item.name}} и {{item.directory}}.

и хотите показать данные в виде каталога, за которым следует имя, предполагая, что "/root "в качестве каталога и "машина" в качестве имени (/root-machine).

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

Я создал эту директиву, которая легко это делает, усекает строку до указанного предела и добавляет переключатель "показать больше/меньше". Вы можете найти его на GitHub: https://github.com/doukasd/AngularJS-Components

его можно использовать так:

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

вот директива:

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

и некоторые CSS, чтобы пойти с ним:

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

Это решение чисто с помощью НГ - тег на HTML.

решение ограничить длинный текст отображается с показать больше...- ссылка в конце. Если пользователь нажмет "показать больше"...'Ссылка, он покажет остальную часть текста и удалил" показать больше...' соединение.

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

ограничить количество слов с помощью настраиваемого углового фильтра: Вот как я использовал угловой фильтр, чтобы ограничить количество слов, отображаемых с помощью пользовательского фильтра.

HTML:

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

Угловой / 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
0

Он работает нормально для меня 'In span', ng-show = " MyCtrl.значение.$viewValue.длина > your_limit" ...читать дальше. 'end span'

0

Я использую хороший набор полезной библиотеки фильтров "угловой фильтр", и один из них, называемый" усеченным", тоже полезен.

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

использование:

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