Limit the length of a string with AngularJS

Question

I have the following    lt div gt   modal title   lt  div gt    Is there a way that I could limit the length of the string to say 20 characters   And an even better question would be is there a way that I could change the string to be truncated and show     at the end if it s more than 20 characters

User · Answer

The simplest solution I found for simply limiting the string length was {{ modal.title | slice:0:20 }}, and then borrowing from @Govan above you can use {{ modal.title.length > 20 ? '...' : ''}} to add the suspension points if the string is longer than 20, so the final result is simply:

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

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

User · Answer

I created this directive that easily does that  truncates the string to a specified limit and adds a  show more less  toggle  You can find it on GitHub  https   github com doukasd AngularJS-Components  it can be used like this    lt p data-dd-collapse-text  100  gt   veryLongText   lt  p gt    Here s the directive      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  gt  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   lt span gt     firstPart     lt  span gt    scope                   var secondSpan    compile   lt span ng-if  collapsed  gt     secondPart     lt  span gt    scope                   var moreIndicatorSpan    compile   lt span ng-if   collapsed  gt     lt  span gt    scope                   var toggleButton    compile   lt span class  collapse-text-toggle  ng-click  toggle    gt   collapsed    less     more    lt  span gt    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                                             And some CSS to go with it    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

User · Answer

You can use this npm module  https   github com sparkalow angular-truncate  Inject the truncate filter into your app module like this    var myApp   angular module  myApp     truncate        and apply the filter in your app this way       text   characters 20

User · Answer

In html its used along with limitTo filter provided by angular itself as below        lt p gt    limitTo 30   keepDots     lt  p gt    filter keepDots         App filter  keepDots    keepDots          function keepDots              return function input scope                if  input  return                if input length  gt  20                  return input                    else                 return input

User · Answer

THE EASIEST SOLUTION --  i ve found is to let Material Design  1 0 0-rc4  do the work  The md-input-container will do the work for you   It concats the string and adds elipses  plus it has the extra advantage of allowing you to click it to get the full text so it s the whole enchilada   You may need to set the width of the md-input-container     HTML    lt md-input-container gt      lt md-select id  concat-title  placeholder    mytext    ng-model  mytext  aria-label  label  gt         lt md-option ng-selected  mytext   gt   mytext          lt  md-option gt      lt  md-select gt   lt  md-input-container gt    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

User · Answer

There is an option   x000D   x000D   text   x000D              max-width  140px  x000D              white-space  nowrap  x000D              overflow  hidden  x000D              padding  5px  x000D              text-overflow  ellipsis       x000D            x000D   lt div class  text  gt 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  lt  div gt  x000D   x000D   x000D

User · Answer

Limit the number of words with a custom Angular filter  Here is how I used an Angular filter to limit the number of words displayed using a custom filter   HTML    lt span gt   dataModelObject TextValue   limitWordsTo  38          lt  span gt    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  gt  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  lt  loopLimit  i                  if  i     0                    limitedString   arrayOfWords i                 else                   limitedString   limitedString         arrayOfWords i                                   return limitedString                End filter

User · Answer

This may not be from the script end but you can use the below css and add this class to the div  This will truncate the text and also show full text on mouseover  You can add a more text and add a angular click hadler to change the class of div on cli   ellipseContent       overflow  hidden      white-space  nowrap      -ms-text-overflow  ellipsis      text-overflow  ellipsis          ellipseContent hover           overflow  visible          white-space  normal

User · Answer

Here is the simple one line fix without css      myString   limitTo  20     myString length  gt  20

User · Answer

If you want something like    InputString    StringPart1   StringPart2  HTML    lt html ng-app  myApp  gt     lt body gt          AngularJS string limit example    strLimit  10   20       lt  body gt   lt  html gt    Angular Code    var myApp   angular module  myApp          myApp filter  strLimit      filter   function  filter       return function input  beginlimit  endlimit          if    input  return        if  input length  lt   beginlimit   endlimit              return input                 return  filter  limitTo   input  beginlimit             filter  limitTo   input  -endlimit                 Example with following parameters   beginLimit   10 endLimit   20    Before  -   home house room etc ava B0363852D549079E3720DF6680E17036 jar After  -   home hous   3720DF6680E17036 jar

User · Answer

You can limit the length of a string or an array by using a filter  Check this one written by the AngularJS team

User · Answer

I would use the following a ternary operator alternative to accomplish the truncation with     as follow   lt div gt    modal title length  gt  20    modal title   limitTo   20            modal title    lt  div gt

User · Answer

More elegant solution   HTML    lt html ng-app  phoneCat  gt     lt body gt          AngularJS string limit example    strLimit  20       lt  body gt   lt  html gt    Angular Code    var phoneCat   angular module  phoneCat          phoneCat filter  strLimit      filter   function  filter       return function input  limit          if    input  return        if  input length  lt   limit              return input                 return  filter  limitTo   input  limit                        Demo   http   code-chunk com chunks 547bfb3f15aa1 str-limit-implementation-for-angularjs

User · Answer

Since we need ellipsis only when the string length is over the limit  it seems more appropriate to add ellipsis by using ng-if than binding      longString   limitTo  20    lt span ng-if  longString length  gt  20  gt  amp hellip  lt  span gt

User · Answer

I know this is late  but in the latest version of angularjs  I m using 1 2 16  the limitTo filter supports strings as well as arrays so you can limit the length of the string like this       My String Is Too Long    limitTo  9      which will output   My String

User · Answer

Here s a custom filter for truncating text  It s inspired by EpokK s solution but modified for my needs and tastes   angular module  app   filter  truncate   function           return function  content  maxCharacters             if  content    null  return              content        content           content   content trim             if  content length  lt   maxCharacters  return content           content   content substring 0  maxCharacters            var lastSpace   content lastIndexOf                if  lastSpace  gt  -1  content   content substr 0  lastSpace            return content                       And here are the unit tests so you can see how it s supposed to behave   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

User · Answer

Edit The latest version of AngularJSoffers limitTo filter   You need a custom filter like this   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  lt   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                                  Usage     some text   cut true 100            Options    wordwise  boolean  - if true  cut only by words bounds  max  integer  - max length of the text  cut to this number of chars  tail  string  default    nbsp  hellip    - add this string to the input       string if the string was cut    Another solution  http   ngmodules org modules angularjs-truncate  by  Ehvince

User · Answer

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

User · Answer

This solution is purely using ng tag on HTML    The solution is to limit the long text displayed with  show more     link at the end of it  If user click  show more     link  it will show the rest of the text and removed the  show more     link   HTML    lt div ng-init  limitText 160  gt      lt p gt    veryLongText   limitTo  limitText             lt a href  javascript void 0               ng-hide  veryLongText length  lt  limitText              ng-click  limitText   veryLongText length   1   gt  show more           lt  a gt      lt  p gt   lt  div gt

User · Answer

I had a similar problem  here is what i did      longString   limitTo  20      longString length  lt  20

User · Answer

lt  div  gt   modal title   limitTo 20      lt    div gt

User · Answer

lt div gt   modal title   slice  0  20   lt  div gt

User · Answer

You can simply add a css class to the div  and add a tool tip via angularjs so that trimmed text will be visible on mouse over     lt div class  trim-info  tooltip    modal title    gt   modal title   lt  div gt       trim-info         max-width  50px        display  inline-block        overflow  hidden        text-overflow  ellipsis        white-space  nowrap          line-height  15px        position  relative

User · Answer

If you have two bindings   item name   and   item directory     And want to show the data as a directory followed by the name  assuming   root  as the directory and  Machine  as the name   root-machine       item directory   isLast                item name     limitTo 5

User · Answer

I use nice set of useful filter library  Angular-filter  and one of them called  truncate  is useful too   https   github com a8m angular-filter truncate  usage is   text   truncate   length    suffix    preserve-boolean

User · Answer

It works ok for me   In span   ng-show    MyCtrl value  viewValue length   your limit     read more   end span

[angularjs] Limit the length of a string with AngularJS

Examples related to angularjs

Examples related to filter

Examples related to angularjs-filter