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

轉貼自 filter - Limit the length of a string with AngularJS - Stack Overflow

寫一本 filter：

jsangular.module('ng').filter('cut', function () {
  return function (value, wordwise, max, tail) {
    if (!value) return '';

    max = parseInt(max, 10);
    if (!max) return value;
    if (value.length <= max) return value;

    value = value.substr(0, max);
    if (wordwise) {
      var lastspace = value.lastIndexOf(' ');
      if (lastspace != -1) {
        value = value.substr(0, lastspace);
      }
    }

    return value + (tail || ' …');
  };
});

使用方式：

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

參數:

切字方式 (布林) - 如果是 true，只切單字。
長度 (整數) - 要保留的最大字數。
後中退出 (字串，預設：'…') - 接在字詞的後面。

---

或直接用別人寫好的：angular-truncate 示範

Answer 2

官方有 api https://docs.angularjs.org/api/ng/filter/limitTo

範例 html 範本中：

Output numbers: {{ numbers | limitTo:numLimit }}

Answer 3

直接css解決吧，需要3個屬性，分別表示不換行、超出部分隱藏、有超出部分顯示省略號

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Answer 4

自訂angularjs filter剪裁長字串，加上省略號，示範網址：http://www.jscssshare.com/#/sample/e6ao1zeH