在 ng-bind-html Angular JS 中限制字符的简单方法答案

【问题标题】：Simple way to limit characters in ng-bind-html Angular JS在 ng-bind-html Angular JS 中限制字符的简单方法
【发布时间】：2015-07-15 14:29:43
【问题描述】：

我正在尝试限制我在我的 Angular js 应用程序中看到的字符。目前我正在使用：

<p ng-bind-html="item.get('Content') | limitTo: 150"></p>

但没有快乐，任何想法......

【问题讨论】：

标签： angularjs

【解决方案1】：

整合此链接：

 <script src="https://code.angularjs.org/1.2.16/angular-sanitize.js"></script>

检查你是否在这里消毒

var adminApp = angular.module('adminApp', ['ngSanitize', ...,])

在您的 html 中，您可以使用以下代码：

<p ng-bind-html="item.get('Content') | limitTo: 150"></td>

【讨论】：

【解决方案2】：

我认为这不适用于 ng-bind-html。这是为了将实际的 html 代码绑定到页面。 ng-bind 应该可以正常工作。

<p ng-bind="item.get('Content') | limitTo: 150"></p>

见 plunkr http://plnkr.co/edit/y0LXMMFi6sU9AhShvuha?p=preview

编辑：

由于其中确实包含 HTML 代码，因此您需要使用 ngSanitize。你可以在这里阅读：https://docs.angularjs.org/api/ngSanitize

添加对 angular-sanitize.js 的引用，然后将其导入应用程序中

var app = angular.module('plunker', ['ngSanitize']);

那么你的原始代码应该可以正常工作，尽管它的一部分可能会被切断，包括结束标签，所以你需要处理它。

请参阅 plnkr：http://plnkr.co/edit/y0LXMMFi6sU9AhShvuha?p=preview

【讨论】：

您假设该操作无缘无故地使用 ng-bind-html... 为什么？
他想限制页面上的字符...向我暗示纯文本。如果他想在代码中添加 div 等，他将不得不使用完全不同的方法。
为
添加 5 个字符加上另外 6 个字符。如果我错了，那么这不是正确的答案，但只有 OP 知道这一点。
嘿，伙计们，数据是从 Parse 中引入的，Parse 中有 html 标签......所以这就是我使用 ng-bind-html 的原因
查看我的编辑，除非你已经在这样做并且只想限制显示的字符，当我输入这个时，我认为这是场景......对吗？
嗨蒂莫西，我已经在使用 nGSanitize 并且我粘贴的原始代码不起作用....

【解决方案3】：

由于您使用ng-bind-html，因此您还需要$sce，所以我的建议是在您的控制器中进行。像这样

Ctrl.$inject= ['$sce', '$filter', '$scope'];
Function Ctrl($sce, $filter, $scope) {
  $scope.content= $filter('limitTo')(dataWithHtml, 100, 0);
  $scope.content= $sce.trustAsHtml($scope.content);
}

在 html 上你可以这样使用：

<p ng-bind-html="content"></p>

在这种情况下，我假设您的原始数据是dataWithHtml，100 是限制数，0 是起点。更多细节请参考官方文档。

【讨论】：

【解决方案4】：

在你的控制器中

$scope.contentText = item.get('Content');

在你的 html 中

<p>{{ contentText | limitTo: 150 }} </p>

【讨论】：

这不使用 ng-bind-html

【解决方案5】：

将$sce 注入你的控制器，然后像下面这样使用它：

$scope.contentText = $sce.trustAsHtml(item.get('Content'));

在你的 html 中

<p ng-bind-html="contentText | limitTo: 150"></p>

【讨论】：

【解决方案6】：

如果您使用 sanitize 过滤器

，您可以在没有功能的情况下使用它

<p ng-bind-html="message  | limitTo: 150 | sanitize"></p>

【讨论】：

【解决方案7】：

如果上面的答案都没有让你满意，那么下面的方法呢？

var app = angular.module('myTestNgApp', ['ngSanitize']);

app.controller('myMainTestCtrl', function($scope) {
  $scope.longText = "This is a very loooooooooooooooooooong text";
})
.filter('textShortenerFilter', function() {
  return function(text, length) {
    if (text.length > length) {
      return text.substr(0, length) + "...";
    }
    return text;
  }
});

工作示例：- https://jsfiddle.net/anjanasilva/8xk9eL0t/

【讨论】：

【解决方案8】：

您可以使用与 ng-bind-html 相同的自定义指令和过滤器

<p to-html>{{content | limitTo:200}}</P>

指令：

.directive('toHtml', function($timeout,$sce) {
   return {
          restrict: 'A',
          link: function($scope, element, attrs, ctrl) {
             $timeout(function() {
                element.html($sce.getTrustedHtml(element[0].innerText) || '');
             }, 200);
          }
         };
})

用省略号截断：

<p to-html>{{content | limitWithEllipsis:200}}</P>

您需要在上述指令中使用自定义过滤器（limitWithEllipsis）

.filter('limitWithEllipsis', function() {
          return function(input, limit, begin) {
              var str='';
                if (Math.abs(Number(limit)) === Infinity) {
                  limit = Number(limit);
                } else {
                  limit = parseInt(limit);
                }
                if (isNaN(limit)) return input;

                if (angular.isNumber(input)) input = input.toString();
                if (!angular.isArray(input) && !angular.isString(input)) return input;
                if(input.length<=limit) return input;
                begin = (!begin || isNaN(begin)) ? 0 : parseInt(begin);
                begin = (begin < 0) ? Math.max(0, input.length + begin) : begin;

                if (limit >= 0) {
                  str=input.slice(begin, begin + limit);
                  return str.concat('....'); 
                } else {
                  if (begin === 0) {
                     str=input.slice(limit, input.length);
                    return str.concat('....');
                  } else {
                     str=input.slice(Math.max(0, begin + limit), begin);
                    return str.concat('....');
                  }
                }
            };
        })

【讨论】：