Question

我试图限制我在角度js app上看到的角色。目前我正在使用：

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

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

Answer 1

因为你使用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是起点。更多细节请参阅官方文件。

Answer 2

整合此链接：

 <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>

Answer 3

在您的控制器中

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

在你的HTML中

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

Answer 4

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

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

在你的HTML中

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

Answer 5

如果您使用清理过滤器

，则无需使用此功能

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

Answer 6

如果上述答案都不能满足您，那么下面的方法怎么样？

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/

Answer 7

您可以使用与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('....');
                  }
                }
            };
        })

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

7 个答案: