AngularJS摘录函数

AngularJS excerpt function

本文关键字：函数 AngularJS      更新时间：2023-09-26

我的HTML字符串存储在我的DB中（我新文章的内容）。

我知道要在我的视图中打印这个html，我可以使用这个

<div ng-bind-html="post.content"></div>

这很好，但假设我只想打印解析字符串的前20个字符。

有没有一种方法可以存储"ng-bind-html"的返回值和对其使用的过滤器？

有没有更好的方法可以在angular中创建摘录功能？

您可以有一个自定义过滤器：

app.filter('ellipsis', function () {
    return function (text, length) {
        if (text.length > length) {
            return text.substr(0, length) + '...';
        }
        return text;
    }
});

你会这样使用：

<div ng-bind-html="post.content | ellipsis:20"></div>

下面是一个演示：http://jsfiddle.net/FfT6s/348/

我只是用npm模块创建了一些过滤器。

条形标记椭圆化

// stripTagsFilter.js
var striptags = require('striptags');
module.exports = function() {
  return function(input) {
    if (!input || !input.length) { return input; }
    return striptags.apply(null, arguments);
  }
};
// ellipsisFilter.js
var ellipsize = require('ellipsize');
module.exports = function() {
  return ellipsize;
};
// wherever you do this stuff
.filter('ellipsis', require('./ellipsisFilter.js'))
.filter('stripTags', require('./stripTagsFilter.js'))

<!-- strip the tags, limit to 20 characters -->
<p>{{post.content | stripTags | ellipsis:20}}</p>

去掉标签可能会把剩下的文本中的句子挤在一起，所以你可能也想添加一个过滤器来解决这个问题。我建议用空格句。

<p>{{post.content | stripTags | spaceSentences | ellipsis:20}}</p>
相关文章：