angulaire.js - Comment AngularJS contrôle-t-il le contenu une fois que la longueur de la chaîne dépasse la longueur spécifiée pour être affiché avec des points de suspension pendant le processus ng-repeat ?

Question

Les données sont stockées dans un tableau et doivent être affichées sur la page HTML. Actuellement, elles sont affichées via ng-repeat. Cependant, la longueur des caractères de l'élément de titre dans le tableau est relativement longue, donc lorsque vous souhaitez limiter l'affichage de ce caractère sur la page HTML, le contenu après la longueur spécifiée sera affiché sous forme d'ellipses. Comment y parvenir ?

page html :

<p ng-repeat="x in TU"> 
<img src="{{x.imgurl}}"> 
<h1>{{x.title}}</h1> 
<p>{{x.cost}}</p>
</p>

Le format des données est le suivant :

$scope.TU = [{
    "tuid":"xy0001",
    "imgurl":"img/178.jpg",
    "title":"哈哈哈哈哈哈哈哈哈",
    "cost":"86"
},
    {
    "tuid":"xy0002",
    "imgurl":"img/178.jpg",
    "title":"呵呵呵呵呵呵呵呵呵呵呵呵",
    "cost":"96"
},
{
    "tuid":"xy0003",
    "imgurl":"img/178.jpg",
    "title":"嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿",
    "cost":"89"
}
]

Answer 1

Reposté depuis le filtre - Limiter la longueur d'une chaîne avec AngularJS - Stack Overflow

Écrire un filtre :

jsangular.module('ng').filter('cut', function () {
  return function (value, wordwise, max, tail) {
    if (!value) return '';

    max = parseInt(max, 10);
    if (!max) return value;
    if (value.length <= max) return value;

    value = value.substr(0, max);
    if (wordwise) {
      var lastspace = value.lastIndexOf(' ');
      if (lastspace != -1) {
        value = value.substr(0, lastspace);
      }
    }

    return value + (tail || ' …');
  };
});

Utilisation :

{{some_text | cut:true:100:' ...'}}

Paramètres :

Méthode de coupe (booléenne) - Si vrai, seuls les caractères uniques seront coupés.
length (entier) - Le nombre maximum de mots à conserver.
suffixe (chaîne, par défaut : '…') - ajouté à la fin du mot.

---

Ou utilisez simplement celui écrit par d'autres : démo angulaire-tronquée

Answer 2

L'API officielle est https://docs.angularjs.org/api/ng/filter/limitTo

Exemple de modèle HTML :

Numéros de sortie : {{ nombres | limitTo:numLimit }}

Answer 3

Résolvons-le directement avec CSS. Trois attributs sont nécessaires, ce qui signifie pas de retour à la ligne, cacher la partie en excès et afficher des points de suspension dans la partie en excès

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Answer 4

Personnalisez le filtre angulaire js pour couper les longues chaînes et ajouter des ellipses : http://www.jscssshare.com/#/sample/e6ao1zeH