angular.js - Bagaimanakah angularjs mengawal kandungan selepas panjang rentetan melebihi panjang yang ditentukan untuk dipaparkan dengan elips semasa proses ng-ulang?

Question

Data disimpan dalam tatasusunan dan perlu dipaparkan pada halaman HTML pada masa ini, ia dipaparkan melalui ng-repeat. Walau bagaimanapun, panjang aksara item tajuk dalam tatasusunan adalah agak panjang, jadi apabila anda ingin mengehadkan paparan aksara ini pada halaman HTML, kandungan selepas panjang yang ditentukan akan dipaparkan dalam bentuk elips. Bagaimana untuk mencapai ini?

halaman html:

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

Format data adalah seperti berikut:

$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