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

Disiarkan semula daripada penapis - Hadkan panjang rentetan dengan AngularJS - Limpahan Tindanan

Tulis penapis:

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 || ' …');
  };
});

Penggunaan:

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

Parameter:

Kaedah pemotongan (Boolean) - Jika benar, hanya aksara tunggal akan dipotong.
panjang (integer) - Bilangan maksimum perkataan untuk disimpan.
akhiran (rentetan, lalai: '...') - dilampirkan pada akhir perkataan.

---

Atau hanya gunakan yang ditulis oleh orang lain: demo bersudut-truncate

Answer 2

Api rasmi ialah https://docs.angularjs.org/api/ng/filter/limitTo

Contoh templat html:

Nombor keluaran: {{ nombor |

Answer 3

Mari selesaikan secara langsung dengan css Tiga atribut diperlukan, yang bermaksud tiada garis pembalut, menyembunyikan bahagian yang berlebihan dan memaparkan elipsis di bahagian yang berlebihan

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

Answer 4

Sesuaikan penapis angularjs untuk memotong rentetan panjang dan menambah alamat tunjuk cara: http://www.jscssshare.com/#/sample/e6ao1zeH