angular.js - How does angularjs control the content after the string length exceeds the specified length to be displayed with ellipses during the ng-repeat process?

Question

The data is stored in an array and needs to be displayed on the HTML page. Currently, it is displayed through ng-repeat. However, the character length of the title item in the array is relatively long, so when you want to limit the display of this character on the HTML page, the content after the specified length will be displayed in the form of ellipses. How to achieve this?

html page:

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

The data format is as follows:

$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

Reposted from filter - Limit the length of a string with AngularJS - Stack Overflow

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

How to use:

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

Parameters:

Word cutting method (Boolean) - If true, only single words will be cut.
length (integer) - The maximum number of words to keep.
suffix (string, default: '...') - appended to the end of the word.

---

Or directly use the one written by others: angular-truncate demo

Answer 2

The official api is https://docs.angularjs.org/api/ng/filter/limitTo

Example html template:

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

Answer 3

Let’s solve it directly with css. Three attributes are needed, which means no line wrapping, hiding the excess part, and displaying ellipsis in the excess part

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

Answer 4

Customize angularjs filter to cut long strings and add ellipses, demo address: http://www.jscssshare.com/#/sample/e6ao1zeH