Changer une seule itération sur un ng-repeat

J'ai un ng-repeat qui se traduit par les noms des pays de mon modèle. Sur certains noms de pays, je veux qu'ils soient abrégés pour réduire la longueur de la chaîne, par exemple, je veux que «l'Irlande du Nord» soit diffusée comme «N. Irlande'.

Modèle JSON

[ { "id": 1, "name": "Italy", }, { "id": 2, "name": "Northern Ireland", }, { "id": 3, "name": "Poland", } ]

Je pourrais simplement changer le nom dans mon modèle, mais je préférerais que cela soit comme je veux que les données brutes soient complètes. C'est seulement dans ce cas précis que je veux l'abréger.

Devrais-je utiliser un filtre ng-repeat ? Si c'est le cas, comment?
Sinon, d'autres suggestions?

HTML

 <md-grid-tile ng-repeat="nation in nationData"> <img src="img/{{nation.name}}.png"> <md-grid-tile-footer> <h3>{{nation.name | uppercase}}</h3> </md-grid-tile-footer> </md-grid-tile>

Vous pouvez créer votre propre filtre abbreviate qui est appliqué au nom. Dans ce filtre, vous pouvez activer le nom du pays et renvoyer le format abrégé.

 app.filter('abbreviate', function() { return function(country) { switch(country){ case "Northern Ireland": country = "N. Ireland" break; } return country; } });

Voir les documents sur les filtres ici

Comme d'autres, écris ton propre filtre.

 app.filter('abbreviate', function() { return function(country) { return country.replace(/^(\S)\S*(\s+\S+)/m, "$1.$2"); } });

Exemple:

 alert("Northern Ireland".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2")); alert("South Africa".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2")); alert("USA".replace(/^(\S)\S*(\s+\S+)/m, "$1.$2"));

Vous pouvez essayer cela. C'est simple.

 <md-grid-tile ng-repeat="nation in nationData"> <img src="img/{{nation.name}}.png"> <md-grid-tile-footer> <H3 ng-if="nation.name.split(' ').length > 1">{{ nation.name | limitTo:1 | uppercase }}. {{ nation.name.split(' ')[1] }}</H3> <H3 ng-if="nation.name.split(' ').length == 1">{{ nation.name }}</H3> </md-grid-tile-footer> </md-grid-tile>

Vous pouvez créer un filtre personnalisé pour y parvenir, comme indiqué ci-dessous:

Dans HTML, procédez comme suit:

 <h3>{{nation.name | myFormat}}</h3>

Dans votre js, définissez ce déposant comme suit:

 app.filter('myFormat', function() { return function(x) { x = x.split(" "); if(x.length>1){ x = x[0].split("")[0] + ". " + x[1]; return x; } else return x[0]; }; });

S'il vous plaît, non pas que selon votre requête, le filtre personnalisé peut être modifié et nous pouvons utiliser pour les boucles si vous avez plus de 2 mots à manipuler.

Utiliser angulaire

https://angular-translate.github.io/

Ensuite, vous mettez tous vos noms de pays comme clés, et vous utiliserez le filtre de traduction

 {{nation.name | translate }}

Et vous pouvez ajouter par exemple pour la langue anglaise: en.json:

 [ { "Italy": "Italy", "Northern Ireland": "N.Ireland", "Poland": "Poland", ..... } ]

Pour un simple limitTo vous pouvez utiliser la limitTo filtre et il est logique de maintenir le modèle inchangé.

Voici un exemple simple (8 caractères):

 <md-grid-tile ng-repeat="nation in nationData"> <img src="img/{{nation.name}}.png"> <md-grid-tile-footer> <h3>{{nation.name | limitTo: 8 | uppercase}}</h3> </md-grid-tile-footer> </md-grid-tile>