wie Grenze Zeichen-Nummer in ng-bind-html in AngularJS?

Wie kann ich die Anzahl der Zeichen für ng-bind-html-Ergebnis in angularJS? Ist es möglich?

Da gibt es zum Beispiel <span>some text </span> in js-Datei und mit $sce und ng-bind-html Transformation nach html.

Möchte ich zeigen som... Wie kann ich es begrenzen?

  • Dieser ist dein Antwort!!! ziemlich nice!!
InformationsquelleAutor m hadadi | 2014-11-30
  1. 4

    AngularJS limitTo mit HTML-tags

    @Sericaia hatten eine tolle Antwort

    Erstellt Sie einen benutzerdefinierten filter etwa so: 

    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;
        }
    });

    Und dann nutzt es in der Ansicht:

    <span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>
    InformationsquelleAutor Yeysides
  2. 4

    Können Sie die limiTo-filter im controller - limitTo fliter.

    Controller:

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

        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>

    Hoffe, das hilft.

    • $filter('limitTo')(YOUR_DATA, YOUR_LIMIT) hat den trick ..
    InformationsquelleAutor Lawless
  3. 0

    Vielleicht müssen Sie einige CSS-tricks für Ihr Modell represenation in html. Wenn Sie zum Beispiel einen langen text Sie können die Anzahl der Linien, wie hier Begrenzung Textlänge n Linien mit CSS

    InformationsquelleAutor Abi-
  4. 0

    Hinzufügen eines "read more" oder "..." am Ende der text abgeschnitten, ich habe ein kleines zwicken zu @Yeysides Antwort erweitern @Sericaia ist "AngularJS limitTo mit HTML-tags".

    Verwenden Sie eine variable mit der suffix string, dann nennen Sie es.

    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;
        }
    });

    Und dann nutzt es in der Ansicht:

    <span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>
    • Dies funktioniert für AngularJS, nicht Eckig 2. Ich habe es getestet und implementiert werden. Haben Sie überprüft, ob der filter ausgelöst wird, richtig?
    • Es funktioniert für mich, aber ich habe eine variable deklarieren, die für maxNumberOfChar im Bereich der Steuerung. zB $scope.maxNumberOfChar = 100;
    InformationsquelleAutor mchebib
Schreibe einen Kommentar