Как ограничить символы строки с помощью AngularJS

Question

Я хочу ограничить количество символов, которые отображаются, когда «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:» вариант в «нг-повтора», но ограничивал количество «item.description (ов)», отображаемого, и не ограничивал ул ING/содержание. Я соблюдал следующие инструкции: https://docs.angularjs.org/api/ng/filter/limitTo

Answer 1

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

добавить свойство 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> 
..... 

здесь DEMO

Answer 2

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

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

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