How to limit the characters of a string using AngularJS

Question

I want to limit the number of characters that are displayed when "ng-repeat" displays JSON data. This app is using AngularJS inside the RoR framework. Currently I have the following code which displays each "item.description" but does not limit the number of characters in the string to a length of 25.

HTML:

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="item in artists">
     {{item.description | limitTo:25}}
    </li>
  </ul>
</div>

Controller:

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

myApp.controller("MyController", function MyController($scope, $http){
$http.get("/assets/data.json").success(function(data){
    $scope.artists = data;
  });

I also tried putting the "limitTo:" option inside "ng-repeat" but that limited the amount of "item.description(s)" being displayed, and did not limit the string/content. I followed these instructions for this problem: https://docs.angularjs.org/api/ng/filter/limitTo

works fine in docs demo, so what is different? Create a demo that replicates problem. We have to way to reproduce this — charlietfl, Oct 04 '15 at 15:56
I think the only difference is that I am using AngularJS in a Rails application. Here is the project: https://github.com/ctpelnar1988/TimelessEsthetics — Ctpelnar1988, Oct 04 '15 at 16:03
what version are you using? Perhaps it is older than when `limitTo` was introduced? — charlietfl, Oct 04 '15 at 16:12
@charlietfl I am using the gem "angular-rails", but also have angular loaded globally. I believe it is: angular@1.4.7 — Ctpelnar1988, Oct 04 '15 at 16:16

Kalhan.Toress · Accepted Answer · 2015-10-04T16:23:54.033

5

There is a better way to do this

add a property to string's prototype object, to truncate a string

/**
 * extends string prototype object to get a string with a number of characters from a string.
 *
 * @type {Function|*}
 */
String.prototype.trunc = String.prototype.trunc ||
function(n){

    // this will return a substring and 
    // if its larger than 'n' then truncate and append '...' to the string and return it.
    // if its less than 'n' then return the 'string'
    return this.length>n ? this.substr(0,n-1)+'...' : this.toString();
};

and this is how we use it in HTML

.....
<li ng-repeat="item in artists">
     // call the trunc property with 25 as param 
     {{ item.description.trunc(25) }}
</li>
.....

here is a DEMO

edited Oct 04 '15 at 16:23

answered Oct 04 '15 at 16:18

Kalhan.Toress

21,683
8
68
92

1

:) glad to help you, and i update the answer with a demo please check :) – Kalhan.Toress Oct 04 '15 at 16:25
2

Great demo! There are going to be a lot of people benefiting from your answer :) – Ctpelnar1988 Oct 04 '15 at 16:32
1

What a great answer. Simple and effective. – Ufb007 Mar 23 '16 at 14:55

score 4 · Answer 2 · answered Oct 04 '15 at 16:01

4

This can be a solution for your problem. Not the best but an option:

{{ item.description | limitTo: 25 }}{{item.description.length > 25 ? '...' : ''}}

I've not tried but I think it can be worked.

answered Oct 04 '15 at 16:01

yuro

2,189
6
40
76

For some reason when I implemented: {{ item.description | limitTo: 25 }}{{item.description.length > 25 ? '...' : ''}} AngularJS completely quit working, displaying things like this: Welcome, {{name}}. – Ctpelnar1988 Oct 04 '15 at 16:06
1

@Ctpelnar1988 hmm ok... I will looking for other solutions. – yuro Oct 04 '15 at 16:09

How to limit the characters of a string using AngularJS

2 Answers2