Question

我想限制＆＃34; ng-repeat＆＃34;时显示的字符数。显示JSON数据。这个应用程序在RoR框架内使用AngularJS。目前我有以下代码显示每个＆＃34; item.description＆＃34;但不限制字符串中的字符数为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;
  });

我也试过把＆＃34;限制到：＆＃34;内部选项＆＃34; ng-repeat＆＃34;但这限制了＆＃34; item.description（s）＆＃34;正在显示，并没有限制字符串/内容。我按照这些说明解决了这个问题：https://docs.angularjs.org/api/ng/filter/limitTo

Answer 1

有一种更好的方法可以做到这一点

向string 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 ? '...' : ''}}

我没试过，但我认为它可以奏效。

如何使用AngularJS限制字符串的字符

2 个答案: