Javascript 角JS。在UI中显示国旗，而我只有国家ID

在我的JSON结构中有

countryId

字段：

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

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

因此，为此，我想我可以创建一个服务，它将返回图标标志的url：

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

但问题是，我需要为200多个国家/地区创建

开关箱
操作员

还有比这更优雅的方法吗
 只需使用地图即可

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

GetCountryFlagicNurlById如下所示：

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

}

当前的缺点是它不检查id是否存在，但这是一个简单的if语句。
只需使用映射即可

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

GetCountryFlagicNurlById如下所示：

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

}

当前的缺点是它不检查id是否存在，但这是一个简单的if语句。
如果您的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"
}

如果您的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"
}

为了获得更具角度的方法，请将您的国家作为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";
  };
});

这将很容易实现，并可在整个应用程序中重用

为了获得更具角度的方法，请将您的国家作为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";
  };
});

这将很容易实现，并可在整个应用程序中重用