У меня есть ng-repeat, который повторяется через имена стран в моей модели. В некоторых названиях стран я хочу, чтобы они сокращали длину строки, например, я хочу, чтобы "Северная Ирландия" выводилась как "N. Ирландия'.
[
{
"id": 1,
"name": "Italy",
},
{
"id": 2,
"name": "Northern Ireland",
},
{
"id": 3,
"name": "Poland",
}
]
Я мог бы просто изменить имя в моей модели, но я предпочел бы оставить это, поскольку я хочу, чтобы исходные данные были полными. Только в этом конкретном экземпляре я хочу, чтобы он был сокращен.
Должен ли я использовать фильтр ng-repeat? Если да, то как?
Если нет, любые другие предложения?
<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>
Вы можете создать свой собственный фильтр abbreviate, который применяется к имени. В этом фильтре вы можете включить название страны и вернуть сокращенный формат.
app.filter('abbreviate', function() {
return function(country) {
switch(country){
case "Northern Ireland":
country = "N. Ireland"
break;
}
return country;
}
});
Как и другие, напишите свой собственный фильтр.
app.filter('abbreviate', function() {
return function(country) {
return country.replace(/^(\S)\S*(\s+\S+)/m, "$1.$2");
}
});
Пример:
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"));Вы можете попробовать это. Это просто.
<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>
Для этого вы можете создать собственный фильтр, как показано ниже:
В HTML сделайте следующее:
<h3>{{nation.name | myFormat}}</h3>
В вашем js определите этот файл, как показано ниже:
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];
};
});
Пожалуйста, не следует, что в соответствии с вашим запросом пользовательский фильтр может быть изменен, и мы можем использовать его для циклов, если вам нужно обрабатывать более двух слов.
использовать angular
https://angular-translate.github.io/
тогда вы поместите все названия своей страны в качестве ключей, и вы будете использовать фильтр трансляции
{{nation.name | translate }}
и вы можете добавить, например, для английского языка: ru.json:
[
{
"Italy": "Italy",
"Northern Ireland": "N.Ireland",
"Poland": "Poland",
.....
}
]
Для простого усечения вы можете использовать фильтр limitTo, и имеет смысл сохранить модель неизменной.
Вот простой пример (8 символов):
<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>