jak ograniczyć liczbę znaków w ng-bind-html w AngularJS?

Question

Jak mogę ograniczyć liczbę znaków dla wyniku ng-bind-html w angularJS? Czy to możliwe?

Na przykład w pliku js znajduje się <span>some text </span>, a przy $sce i ng-bind-html przekształcamy w html.

Chcę pokazać som... Jak mogę to ograniczyć?

Answer 1

Może trzeba wykonać pewne sztuczki CSS na reprezentacji modelu w html. Na przykład, jeśli masz długi tekst, możesz ograniczyć liczbę linii, jak tutaj: Limit text length to n lines using CSS

Answer 2

Możesz użyć filtra limiTo w kontrolerze - limitTo fliter.

Kontroler:

app.controller('myCtrl', ['$scope','$sce','$filter', 
function($scope, $sce, $filter) { 
    var dataObj = [];   
    for(var i = 0; i < data.length; i++){ 
     console.log(data[i].Src) 

     // $filter('limitTo')(input, limit) 

     var content = $filter('limitTo')(data[i].Content, 150) 
     var itemObj = { 
      Content: $sce.trustAsHtml(content) 
     } 
     dataObj.push(itemObj); 
    } 
    $scope.ngRepeatArray = dataObj; 
}]) 

HTML

<ul> 
    <li ng-repeat="item in ngRepeatArray"> 
      <p ng-bind-html="item.Content"></p> 
    </li> 
</ul> 

Nadzieja to pomaga.

Answer 3

AngularJS limitTo using HTML tags

@Sericaia świetnie odpowiedź

Tworzy filtr niestandardowy tak:

angular.module('limitHtml', []) 
    .filter('limitHtml', function() { 
     return function(text, limit) { 

      var changedString = String(text).replace(/<[^>]+>/gm, ''); 
      var length = changedString.length; 

      return length > limit ? changedString.substr(0, limit - 1) : changedString; 
     } 
    }); 

A następnie wykorzystuje go w widoku:

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span> 

Answer 4

Aby dodaj "czytaj więcej" lub "..." na końcu obciętego tekstu, dodałem sma Zmodyfikuj do @Yeysides's answer, rozszerzając @Sericaia's "AngularJS limitTo using HTML tags".

Użyj zmiennej z ciągiem suffix, a następnie wywołaj ją.

angular.module('limitHtml', []) 
    .filter('limitHtml', function() { 
     return function(text, limit) { 

      var changedString = String(text).replace(/<[^>]+>/gm, ''); 
      var length = changedString.length; 
      var suffix = ' ...'; 

      return length > limit ? changedString.substr(0, limit - 1) + suffix : changedString; 
     } 
    }); 

A następnie wykorzystuje go w widoku:

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>