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

Question

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

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

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

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

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

627 24

angularjs filter angularjs-filter

24 ответов:

Comments

Ничего не найдено.

EpokK · Accepted Answer · 2017-03-06 14:41:16

Edit Последняя версия 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 (by @Ehvince)

Govan · Accepted Answer · 2014-09-17 16:49:26

вот простое исправление одной строки без css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}

slim · Accepted Answer · 2014-05-09 17:42:17

Я знаю, что это поздно, но в последней версии angularjs (я использую 1.2.16) фильтр limitTo поддерживает строки, а также массивы, поэтому вы можете ограничить длину строки следующим образом:
{{ "My String Is Too Long" | limitTo: 9 }}
что будет на выходе:
My String

Sushrut · Accepted Answer · 2013-08-07 09:42:51

вы можете просто добавить класс 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;
   }

crc442 · Accepted Answer · 2015-03-10 20:59:05

У меня была похожая проблема, вот что я сделал:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}

Anam · Accepted Answer · 2015-03-26 01:03:25

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

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

mnishiguchi · Accepted Answer · 2016-02-12 23:11:28

поскольку нам нужен многоточие только тогда, когда длина строки превышает предел, кажется более целесообразным добавить многоточие с помощью ng-if чем привязки.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

Thiago Araújo · Accepted Answer · 2017-03-15 09:38:47

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

13

2017-03-15 09:38:47

Aleksandr Havrylov · Accepted Answer · 2016-08-29 12:49:37

есть вариант

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

SharkAlley · Accepted Answer · 2014-11-01 10:59:02

вот пользовательский фильтр для усечения текста. Он вдохновлен решением 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...");
    });
});

MAM · Accepted Answer · 2014-02-12 08:24:00

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

Shushanth Pallegar · Accepted Answer · 2015-02-01 13:53:35

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

        }


    }

vhamon · Accepted Answer · 2016-10-05 16:21:40

Если вы хотите что-то вроде : 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

до: - / home/house/room/etc / ava_B0363852D549079E3720DF6680E17036.банку
после: - / home / hous...3720DF6680E17036.банку

maudulus · Accepted Answer · 2017-06-06 00:36:38

самое простое решение, которое я нашел для простого ограничения длины строки было {{ 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

Mohideen ibn Mohammed · Accepted Answer · 2015-12-08 14:55:38

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

Kurkula · Accepted Answer · 2016-02-11 21:23:11

Это может быть не из конца сценария, но вы можете использовать приведенный ниже 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;
    }

charming mel · Accepted Answer · 2015-11-26 16:11:14

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

введите усеченный фильтр в модуль вашего приложения следующим образом:
var myApp = angular.module('myApp', ['truncate']); 
и применить фильтр в вашем приложении таким образом:
{{ text | characters:20 }} 

Helzgate · Accepted Answer · 2016-02-16 18:30:30

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

Harish Pothula · Accepted Answer · 2017-08-17 02:06:14

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

и хотите показать данные в виде каталога, за которым следует имя, предполагая, что "/root "в качестве каталога и "машина" в качестве имени (/root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}

Dimitris · Accepted Answer · 2014-08-07 17:52:55

Я создал эту директиву, которая легко делает это, усекает строку до указанного предела и добавляет переключатель "показать больше/меньше". Вы можете найти его на 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: ')';
}

Amirul · Accepted Answer · 2015-12-17 12:59:55

Это решение чисто с помощью НГ - тег на 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>

Geoff · Accepted Answer · 2016-06-01 21:52:26

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

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

G. K. · Accepted Answer · 2016-08-12 08:33:31

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

Lukas Jelinek · Accepted Answer · 2017-09-29 12:28:00

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

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

использование:
text | truncate: [length]: [suffix]: [preserve-boolean]