我有一个ng-repeat,它遍历模型中国家/地区的名称。在某些国家/地区名称上,我希望缩写它们以缩短字符串的长度,例如,我想要北爱尔兰'输出为' N.爱尔兰&#39 ;.
[
{
"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>
答案 0 :(得分:6)
您可以创建自己应用于名称的过滤器abbreviate
。在此过滤器中,您可以打开国家/地区名称并返回缩写格式。
app.filter('abbreviate', function() {
return function(country) {
switch(country){
case "Northern Ireland":
country = "N. Ireland"
break;
}
return country;
}
});
答案 1 :(得分:3)
像其他人说的那样,写下你自己的过滤器。
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"));
答案 2 :(得分:3)
你可以试试这个。这很简单。
<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>
答案 3 :(得分:2)
您可以创建自定义过滤器来实现此目的,如下所示:
在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];
};
});
请注意,根据您的要求,可以修改自定义过滤器,如果您还要处理超过2个单词,我们可以使用for循环。
答案 4 :(得分:2)
使用角度
https://angular-translate.github.io/
然后您将所有国家/地区名称作为键,您将使用翻译过滤器
{{nation.name | translate }}
您可以添加例如英语语言: en.json:
[
{
"Italy": "Italy",
"Northern Ireland": "N.Ireland",
"Poland": "Poland",
.....
}
]
答案 5 :(得分:1)
对于简单的截断,您可以使用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>