角度JS.在UI中显示国家/地区标志，而我只有国家/地区的ID

Angular JS. Show country flags in UI while I have only ID of country

本文关键字：国家 地区 ID 标志 显示 JS 角度 UI      更新时间：2023-09-26

在我的JSON结构中有countryIds字段：

[
    {countryIds: [1, 35, 16]}
    {countryIds: [6, 21]}
]

在UI中，我想显示国旗而不是国家ID。

因此，为此目的，我认为我可以创建将返回图标标志网址的服务： 

getCountryFlagIconUrlById(countryId) {
  switch(countryId) {
    case 1: return "http://mySite:8080/resources/usa.png"
    .....
    case 200: return "http://mySite:8080/resources/russia.png"
  }

但问题是我需要为 200 多个国家/地区创建switch-case运算符。

还有比这更优雅的方法吗？

只需使用地图

var countries = { 
   1: 'usa',
   ...,
   200: 'russia'
};

getCountryFlagIconUrlById如下：

function getCountryFlagIconUrlById(id) {
  return 'http://localhost:8080/resources/'+countries[id]+'.png';
}

目前的缺点是它不检查 id 是否存在，但这是一个简单的 if 语句。

对于更有棱角的方法，将您的国家/地区作为 JSON 地图存储在.factory中，并带有 ID 和 png 的名称值对。

然后创建一个自定义.filter，该根据用作输入的 id 映射值。 过滤器文档

工作小提琴 

app.factory('FlagFactory', function() {
     return {
        1: "usa",
        2: "russia",
        ...
        ...
     };
});
app.filter('flag', ['FlagFactory', function(FlagFactory) {
  return function(input) {
     return "http://mySite:8080/resources/" + FlagFactory[input] + ".png";
  };
});

这样，这将易于实现并可在整个应用程序中重复使用。

<html> Hello World {{someCountryID | flag}}  </html>

附加说明：

如果您打算使用计划使用角度模型来更新图像标签的 src，您应该使用ng-src否则网站将尝试在角度替换它之前使用文字哈希 {{someimage}} 获取图像。

<img ng-src="{{foo | flag}}" alt="flag" />

如果你是 countryId 是唯一的 [它们应该是， 您可以相应地重命名图像并将代码重新设计为

getCountryFlagIconUrlById(countryId) {
    return "http://mySite:8080/resources/" + countryId + ".png"
}

另一种方法是，如果您的 json 结构允许，用户国家 ID 以获取国家/地区名称并相应地获取图像。

也就是说，如果你有

{1 ： "国家

1"， 2： "国家2"}

您可以像这样修改方法

getCountryFlagIconUrlById(countryId) {
    return "http://mySite:8080/resources/" + countryJSON[countryId] + ".png"
}
相关文章：