Как ограничить символы строки, используя AngularJS

Я хочу ограничить количество символов, которые отображаются, когда "ng-repeat" отображает данные JSON. Это приложение использует AngularJS внутри платформы RoR. В настоящее время у меня есть следующий код, который отображает каждое "item.description", но не ограничивает количество символов в строке длиной до 25.

HTML:

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

контроллер:

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

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

Я также попытался поместить параметр limitTo: в "ng-repeat", но это ограничило количество отображаемых "item.description (s)" и не ограничило строку / содержимое. Я следовал этим инструкциям для этой проблемы: https://docs.angularjs.org/api/ng/filter/limitTo

Источник

2 ответа

Решение

Есть лучший способ сделать это

добавить свойство к string"s prototype object, чтобы обрезать строку

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

и вот как мы используем его в HTML

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

вот ДЕМО

Источник

Это может быть решением вашей проблемы. Не самый лучший, но вариант:

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

Я не пробовал, но думаю, что это сработает.

Источник
Другие вопросы по тегам