angular.js - angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示

Question

数据存在一个数组里面，需要把这些数据显示到HTML页面上，目前是通过ng-repeat方式来显示。但是数组中title这一项的字符长度比较长，所以想要限制一下这段字符在HTML页面上显示时，超过指定的长度后面的内容就会以省略号的形式显示。请问要怎么样实现？

html页面：

<p ng-repeat="x in TU"> 
<img src="{{x.imgurl}}"> 
<h1>{{x.title}}</h1> 
<p>{{x.cost}}</p>
</p>

数据格式如下：

$scope.TU = [{
    "tuid":"xy0001",
    "imgurl":"img/178.jpg",
    "title":"哈哈哈哈哈哈哈哈哈",
    "cost":"86"
},
    {
    "tuid":"xy0002",
    "imgurl":"img/178.jpg",
    "title":"呵呵呵呵呵呵呵呵呵呵呵呵",
    "cost":"96"
},
{
    "tuid":"xy0003",
    "imgurl":"img/178.jpg",
    "title":"嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿",
    "cost":"89"
}
]

Answer 1

フィルタから再投稿 - AngularJSで文字列の長さを制限する - コードログ

フィルターを作成します:

リーリー

使用方法:

{{some_text | cut:true:100:' ...'}}

パラメータ:

単語の切り取り方法 (ブール値) - true の場合、単一の単語のみが切り取られます。

length (整数) - 保持する最大単語数。
接尾辞 (文字列、デフォルト: '...') - 単語の末尾に追加されます。

---

または、他の人が書いたものを直接使用します: angular-truncate デモ

Answer 2

公式 API は https://docs.angularjs.org/api/ng/filter/limitTo です

HTMLテンプレートの例:

出力数値: {{数値|limitTo:numLimit }}

Answer 3

CSS を使用して直接解決しましょう。これは、行の折り返しを行わない、余分な部分を非表示にする、余分な部分に省略記号を表示するという 3 つの属性が必要です。 リーリー

Answer 4

angularjs フィルターをカスタマイズして長い文字列を切り取り、省略記号を追加します。デモのアドレス: http://www.jscssshare.com/#/sample/e6ao1zeH