it-swarm.com.de

AngularJS: Wie zeige ich Ellipsen, die mit limitTo nur dann filtern, wenn ein String den Grenzwert überschreitet?

Ich verwende den limitTo-Filter für einige Zeichenfolgen. Wenn die Zeichenfolge weniger als beispielsweise 10 Zeichen umfasst, wird die Zeichenfolge unverändert angezeigt. Wenn die Zeichenfolge länger als 10 Zeichen ist, möchte ich nach dem Abschneiden der Zeichenfolge am zehnten Zeichen Ellipsen anzeigen. Gibt es eine Abkürzung dafür? Vielen Dank

zum Beispiel:

{{main.title | limitTo:10}}

wenn main.title = "A Good Day", lautet die Ausgabe: A Good Day

wenn main.title = "Ein schrecklicher Tag" wäre die Ausgabe: Ein schrecklicher ...

11
d1du

Wenn Sie möchten, können Sie dafür einen Filter erstellen. Ich würde jedoch die ngIf-Direktive wie folgt verwenden:

(function() {
  'use strict';

  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.text = 'Really longer than 10';
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">
  Without limit: <span ng-bind="ctrl.text"></span>
  <hr>
  With limit: <span ng-bind="ctrl.text | limitTo:10"></span>
  <span ng-if="ctrl.text.length > 10">...</span>
</body>

</html>

26
developer033

Hoffe das hilft :

{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
35
BeingSuman

Verwenden Sie <span ng-class="{'Ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>

Sie müssen eine CSS-Klasse .Ellipsis:after{ content: '...'; } und eine Bereichsvariable limit definieren.

ODER

{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}

(function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Hello World";
          $scope.limit = 10;
        });
    })();
.Ellipsis:after{ content: '...'; }
<!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <h3>Using Option1</h3>
      <span ng-class="{'Ellipsis': text.length > limit}">{{ text | limitTo:limit }}</span>
      <br>
      <h3>Using Option2</h3>
      <span>{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}</span>
    </body>

    </html>

4
muasif80

Das Schreiben eines eigenen Filters basierend auf limitTo ist der beste Weg, dies zu tun. 

angular.module('your-module-name').filter('dotsFilter', [
    '$filter',
    function ($filter) {
        /**
         * Shorten the input and add dots if it's needed
         * @param {string} input 
         * @param {number} limit
         */
        function dotsFilter(input, limit) {
            var newContent = $filter('limitTo')(input, limit);
            if(newContent.length < input.length) { newContent += '...'; }
            return newContent;
        }

        return dotsFilter;
    }
]);

Verwendung in der Ansicht:

{{ model.longTextData | dotsFilter:10 }}

Da bereits andere Antworten mit anglejs veröffentlicht wurden, gebe ich Ihnen eine einfache CSS-Technik, um dies zu tun.

   (function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";
        });
    })();
span.Ellipsis {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: Ellipsis;
}
    <!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <span ng:class="{true:'Ellipsis', false:''}[text.length>=10]" style="max-width: 10ch;">{{text}}</span>
    </body>

    </html>

2
Raman Sahasi
<div maxlength="59"> 
  {{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}} 
</div>

dies ist nützlich und wird auch ausgeführt, Angular 5 Material UI

1
user10889447

Jemand, der in der Zukunft liest, könnte erwägen, CSS anstelle von JS zu verwenden. So etwas wie:

.Ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
0
diegopso