Kamutu Yeung

繁华渐欲迷人眼,切勿迷失其本心

  • 主页
所有文章 友链 关于我

Kamutu Yeung

繁华渐欲迷人眼,切勿迷失其本心

  • 主页

angular 自定义过滤器截取字符串,并显示‘...’

2016-07-19

在实际的项目开发中有时候会出现在固定区域了,显示相当的文字,这个时候在不考虑css的情况下,怎么使用angularjs自身就带有的截取功能呢?
这个时候有同学会说可以用limitTo啊

1
{{ limitTo_expression | limitTo : limit : begin}}

是的也是一个方法,但是同学好像忘记审题了,这他们的后面是说要显示省略号

在经过多方搜索,发现了一个可以自定义过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
myApp.filter('cutfilter', 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('');
// alert(lastspace)
if (lastspace != -1) {
value = value.substr(0, lastspace);
// $(".hovers").hide();
}
}
return value + (tail || ' ');
};
});

使用方式

1
{{截取字符串5565613354 || cutfilter:true:5:'...'}}

输出结果为:
截取字符串…

赏

谢谢你请我吃糖果

  • angular

扫一扫,分享到微信

微信分享二维码
[javascript学习系列一] 简介和常用方法
angular 深层嵌套ngRepeat中获取radio的值和checkbox的值
© 2018 Kamutu Yeung
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • angular
  • apicloud
  • vue2.0
  • javascript
  • git
  • Nodejs
  • npm
  • chromedriver
  • vue报错
  • webpack
  • css
  • 前端
  • vue
  • 移动端适配
  • 面试
  • 小程序
  • github
  • 跨域
  • iframe

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

很惭愧

只做了一点微小的工作
谢谢大家