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

Reposted from filter - AngularJS로 문자열 길이를 제한하세요.

필터 작성:

으아악

사용 방법:

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

매개변수:

단어 자르기 방법(부울) - true인 경우 단일 단어만 잘립니다.

길이(정수) - 유지할 최대 단어 수입니다.
접미사(문자열, 기본값: '...') - 단어 끝에 추가됩니다.

---

또는 다른 사람이 작성한 것을 직접 사용: 각도 잘림 데모

Answer 2

공식 API는 https://docs.angularjs.org/api/ng/filter/limitTo

입니다.

예제 HTML 템플릿:

출력 숫자: {{ 숫자 |

Answer 3

줄 바꿈 없음, 남는 부분 숨기기, 남는 부분에 줄임표 표시라는 세 가지 속성이 필요합니다. 으아악

Answer 4

Angularjs 필터를 사용자 정의하여 긴 문자열을 자르고 줄임표를 추가하세요. 데모 주소: http://www.jscssshare.com/#/sample/e6ao1zeH