Angularjs how to control the length of a string beyond a specified length in the ng-repeat process to display with ellipses

There is an array of data that needs to be displayed on the HTML page, which is now displayed in Ng-repeat mode. But the character length of the title in the array is longer, so if you want to limit the number of characters that are displayed on an HTML page, the content after the specified length is displayed as ellipses. How to achieve it?

HTML page:

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

The data format is as follows:

$scope. TU = [{"Tuid":"Xy0001","Imgurl":"img/178.jpg", "title": "hahaha haha haha haha", "cost": "The" "" "}, { " tuid ":" xy0002 ", " Imgurl ":img/178.jpg", "title": Ha ha ha ha ha ha hehe , "Cost ": "" "},{" tuid ":" xy0003 ", " Imgurl": "Img/178.jpg", "title": "Hey hehe Hey hei hei hei Hey Hey Hei hei hei hey Hey heh hei hei hehe ", "cost":"89"}]

Write a filter:

Angular.module (' ng '). Filter (' Cut ',function() {Returnfunction(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:

Tangent word (Bollinger bands)-If True, only the single word is cut.
Length (integer)-the maximum number of characters to retain.
After the 輟 (string, default: ' ... ')-next to the word.

or write it directly with someone else: angular-truncate Demo

Official API Https://docs.angularjs.org/api/ng/filter/limitTo

In the example HTML template:

Output numbers: {{numbers | limitto:numlimit}}

Angularjs how to control the length of a string beyond a specified length in the ng-repeat process to display with ellipses