3

This is my code :

 <option ng-repeat="name in names" value="{{names.name}">
    {{names.name | limitTo:10 }}
 </option>

How can I add a condition: 

if( names.name.length > 10) { 
     //add ... point after name displayed 
}

to get result <option value="Alexander Bradley">Alexander ... </option>

Any ideas?

scniro
  • 16,844
  • 8
  • 62
  • 106
kenza
  • 195
  • 1
  • 4
  • 16
  • 1
    I'm curious why you want to limit the length of the name. If it's because you only have so much width, I would do this in css instead. – Sam Jacobs Apr 17 '15 at 16:15
  • *a similar question with answers below link* http://stackoverflow.com/questions/18095727/limit-the-length-of-a-string-with-angularjs/28262387#28262387 – Shushanth Pallegar Apr 24 '15 at 19:57
  • *similar question with results below link* http://stackoverflow.com/questions/18095727/limit-the-length-of-a-string-with-angularjs/28262387#28262387 – Shushanth Pallegar Apr 24 '15 at 19:58

2 Answers2

7

You can create your own filter that does this and include the length parameter if you like.

.filter("ellipses", function () {
    return function (item) {
        if (item.length > 10) {
            return item.substring(0, 10) + " ..."
        }
        return item;
    };
});

<option ng-repeat="name in names" value="{{names.name}">
    {{names.name | ellipses }}
</option>

You can include the length argument as well and even use limitTo itself:

.filter("ellipses", ["$filter", function ($filter) {
    return function  (item, limit) {
        if (item.length > limit) {
            return $filter("limitTo")(item, limit) + " ...";
        }
        return item;
    };
}]);
kenza
  • 195
  • 1
  • 4
  • 16
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • 1
    This is the right answer, though you could probably give more info about how to set up filters, since the OP may not know. – tandrewnichols Apr 17 '15 at 16:18
2

I think this is what you asked for.. Limiting the name to 10 chars and then adding a "..." to the end of it if it exceeds 10 characters. This is how I would do it. (Also fixed some of your syntax errors). 

<option ng-repeat="name in names" value="{{name}}">
    {{name.length <= 10 ? name : name.substring(0, 10) + "..."}}
</option>
Eric Dang
  • 21
  • 3